반응형 레이아웃---기본 소개
1. 미디어 쿼리(@media)
媒体查询的含义：다양한 장치의 화면 크기에 따라 페이지 스타일 결정(레이아웃 및 스타일에 국한되지 않음)
需求：다른 화면 크기에 따라 동일한 페이지에 다른 스타일 효과를 표시해야 하는 div가 있습니다.
基本结构：
<body>
<!-- 概念：为不同屏幕尺寸设定不同的css的样式 -->
<div id="dv"></div>
</body>
style样式：
<style>
#dv {
width: 100px;
height: 200px;
}
/* 屏幕大小一 */
@media screen and (min-device-width:200px) and (max-device-width:500px) {
#dv{
background-color: yellow;
}
}
/* 屏幕大小二 */
@media screen and (min-device-width:501px) and (max-device-width:1200px) {
#dv{
background-color: red;
}
}
</style>
调试说明:F12는 콘솔을 열고 모바일 터미널로 전환하고 화면 크기를 디버그로 변경합니다.
需求：박스의 개수는 스크린 디바이스 화면의 너비에 따라 배분되며, 해상도가 400px 이상일 경우 3개의 박스가 한 줄에 표시되고 2개의 박스가 300~399px까지 한 줄에 표시되며 1개의 박스가 표시됩니다. 해상도가 200~299px일 때 선.
基本结构
<!-- width height 浏览器可视宽高 -->
<!-- device-width device-heigth 设备屏幕的宽高 -->
<div class="dv">
<div></div>
<div></div>
<div></div>
</div>
style样式代码
<style>
.dv {
width: 100%;
height: 500px;
}
.dv div {
float: left;
height: 200px;
}
/* 一行三个div */
@media screen and (min-device-width:400px) {
.dv div {
width: 33.3%;
}
.dv div:nth-child(1){
background-color: green;
}
.dv div:nth-child(2){
background-color: red;
}
.dv div:nth-child(3){
background-color: black;
}
}
/* 两行三个div */
@media screen and (min-device-width:300px) and (max-device-width:399px) {
.dv div {
width: 50%;
}
.dv div:nth-child(1){
background-color: green;
}
.dv div:nth-child(2){
background-color: red;
}
.dv div:nth-child(3){
background-color: black;
}
}
/* 3行三个div */
@media screen and (min-device-width:200px) and (max-device-width:299px) {
.dv div {
width: 100%;
}
.dv div:nth-child(1){
background-color: green;
}
.dv div:nth-child(2){
background-color: red;
}
.dv div:nth-child(3){
background-color: black;
}
}
</style>
效果展示：(400px보다 큰 해상도)
(300px에서 399px 사이의 해상도)
2. 미디어 쿼리를 도입하는 여러 가지 방법
双style标签引入:스타일 태그 쌍에 도입되어 다른 스타일 태그 쌍에 공통 코드를 넣을 수 있습니다.
<style>
//公共代码
.dv {
width: 100%;
height: 500px;
}
.dv div {
float: left;
height: 200px;
}
.dv div:nth-child(1){
background-color: green;
}
.dv div:nth-child(2){
background-color: red;
}
.dv div:nth-child(3){
background-color: black;
}
</style>
<style media="(min-device-width:200px) and (max-device-width:299px)">
.dv div{
width: 50%;
}
</style>
<style media="(min-device-width:300px) and (max-device-width:500px)">
.dv div{
width: 33.3%;
}
</style>
采用link方式引入，标签内部meta判断分辨率
<link rel="stylesheet" href="./css/css-1.css">
<link rel="stylesheet" href="./css/css-2.css" media="(min-device-width:200px) and (max-device-width:299px)">
<link rel="stylesheet" href="./css/css-3.css" media="(min-device-width:800px)">
释疑：화면 해상도가 200~299px 사이일 경우 css-2.css 파일을 사용하고, 800px 이상일 경우 css-3.css 파일을 선택합니다.
소스 코드 요청 QQ 그룹: 822951132(비고)