开发中常见的写法：
@media (媒体特性) {
选择器 {
样式
}
}
-
媒体特性常用写法
max-width
min-width -
直接看例子，要求如下：
视口宽度 >= 768px，网页背景色是 粉色 视口宽度 >= 992px，网页背景色是 绿色 视口宽度 >= 1200px，网页背景色是 skyblue
/* 最小值就是768px */
@media (min-width: 768px) {
body {
background-color: pink;
}
}
/* 最小值就是7992px */
@media (min-width: 992px) {
body {
background-color: green;
}
}
/* 最小值就是1200px */
@media (min-width: 1200px) {
body {
background-color: skyblue;
}
}
注意：
-
书写顺序一定不能变；
-
因为因为查询也是css属性，css属性都有层叠性。
-
用min-width书写时，书写顺序一定是从小到大，用max-width书写时，书写顺序一定是从大到小。
效果如下：
当width大于768px，小于992px时：
width大于992px小于1200px时：
width大于1200px时
若调换1和3的位置：
/* css属性都有层叠性 */
@media (min-width: 1200px) {
body {
background-color: skyblue;
}
}
/* 最小值就是768px */
@media (min-width: 768px) {
body {
background-color: pink;
}
}
/* 最小值就是7992px */
@media (min-width: 992px) {
body {
background-color: green;
}
}
则当width大于1200px时，body的背景色仍是绿色，因为css属性具有层叠性，当大于1200px时候，ma是满足大于992px的要求，则为绿色。
B站就使用了媒体查询
