Responsive Layout---Basic Introduction
1. Media queries (@media)
媒体查询的含义：Determine the style of the page according to the screen size of different devices (not limited to layout and style)
需求：There is a div that requires different style effects to be displayed on the same page according to different screen sizes.
基本结构：
<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 opens the console, switches to the mobile terminal, and changes the screen size to debug.
需求：The number of boxes is distributed according to the width of the screen device screen. When the resolution is greater than 400px, three boxes are displayed in one line, two boxes are displayed in a line from 300 to 399px, and one box is displayed in a line when the resolution is 200 to 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>
效果展示：(resolution greater than 400px)
(resolution between 300px and 399px)
2. Several ways to introduce media queries
双style标签引入:Introduced in a pair of style tags, you can put common code in another pair of style tags
<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)">
释疑：When the screen resolution is between 200px and 299px, use the css-2.css file, and when it is larger than 800px, choose the css-3.css file.
Source code request QQ group: 822951132 (remarks)