Escritura común en desarrollo:
@media (媒体特性) {
选择器 {
样式
}
}
-
Las características de los medios se escriben comúnmente
max-width
min-width -
Mirando directamente el ejemplo, los requisitos son los siguientes:
视口宽度 >= 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;
}
}
Aviso:
-
El orden de escritura no debe cambiarse;
-
Debido a que la consulta también es una propiedad css, las propiedades css tienen propiedades en cascada.
-
Al escribir con ancho mínimo, el orden de escritura debe ser de menor a mayor, y cuando se escribe con ancho máximo, el orden de escritura debe ser de mayor a menor.
El efecto es el siguiente:
Cuando el ancho es mayor de 768 px y menor de 992 px : Cuando el ancho es mayor de
992 px y menor de 1200 px: Cuando el ancho es mayor
de 1200 px
Si se intercambian las posiciones 1 y 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;
}
}
Luego, cuando el ancho es superior a 1200 px, el color de fondo del cuerpo sigue siendo verde, porque la propiedad CSS tiene propiedades en cascada. Cuando el ancho es superior a 1200 px, si el ma cumple con el requisito de más de 992 px, es verde.
La estación B usa consultas de medios
