Common writing in development:
@media (媒体特性) {
选择器 {
样式
}
}
-
Media features are commonly written
max-width
min-width -
Looking directly at the example, the requirements are as follows:
视口宽度 >= 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;
}
}
Notice:
-
The writing order must not be changed;
-
Because the query is also a css property, css properties have cascading properties.
-
When writing with min-width, the writing order must be from small to large, and when writing with max-width, the writing order must be from large to small.
The effect is as follows:
When the width is greater than 768px and less than 992px : When the width is greater than
992px and less than 1200px: When the width is greater
than 1200px
If the positions of 1 and 3 are swapped:
/* 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;
}
}
Then when the width is greater than 1200px, the background color of the body is still green, because the CSS property has cascading properties. When the width is greater than 1200px, if the ma meets the requirement of greater than 992px, it is green.
Station B uses media queries
