tutorial - ¿Por qué importa el orden de las consultas de medios en CSS?
html en elementor (2)
Eso es por diseño de CSS - Hoja de estilos en cascada.
Significa que, si aplica dos reglas que colisionan con los mismos elementos, elegirá la última que fue declarada, a menos que la primera tenga el marcador !important o sea más específica (por ej. html > body versus just body , este último es menos específico).
Entonces, dado este CSS
@media (max-width: 600px) {
body {
background: red;
}
}
@media (max-width: 400px) {
body {
background: blue;
}
}
si la ventana del navegador tiene 350 píxeles de ancho, el fondo será azul, mientras que con este CSS
@media (max-width: 400px) {
body {
background: blue;
}
}
@media (max-width: 600px) {
body {
background: red;
}
}
y el mismo ancho de ventana, el fondo será rojo. Ambas reglas son de hecho coincidentes, pero la segunda es la que se aplica porque es la última regla.
Finalmente, con
@media (max-width: 400px) {
body {
background: blue !important;
}
}
@media (max-width: 600px) {
body {
background: red;
}
}
o
@media (max-width: 400px) {
html > body {
background: blue;
}
}
@media (max-width: 600px) {
body {
background: red;
}
}
el fondo será azul (con una ventana de 350 píxeles de ancho).
Últimamente, he estado diseñando sitios que son más receptivos y he estado utilizando consultas de medios de CSS con frecuencia. Un patrón que noté es que el orden en que se definen las consultas de los medios realmente importa. No lo probé en todos los navegadores, solo en Chrome. ¿Hay una explicación para este comportamiento? Algunas veces se vuelve frustrante cuando su sitio no funciona como debería y no está seguro de si es la consulta o el orden en el que se escribió la consulta.
Aquí hay un ejemplo:
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two"><a href="#">Contact us</a></div>
</body>
CSS:
body{
font-size:1em; /* 16px */
}
.two{margin-top:2em;}
/* Media Queries */
@media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
@media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
Sin embargo, si escribí la consulta para 1024x600 en el último, el navegador la ignoraría y aplicaría el valor de margen especificado en el inicio del CSS (margin-top: 2em).
/* Media Queries - Re-arranged version */
@media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
/*1024x600*/
@media (max-height: 600px) {
.two{margin-top:4em;}
}
Si mi comprensión de las consultas de los medios es correcta, el orden no debería importar, pero parece que sí. ¿Cuál podría ser la razón?
O simplemente puede agregar min-width a las consultas de medios más grandes y no tener ningún problema, independientemente del orden.
@media (min-width: 400.1px) and (max-width: 600px) {
body {
background: red;
}
}
@media (max-width: 400px) {
body {
background: blue;
}
}
Usando este código, en cualquier orden, el color de fondo siempre será rojo para resoluciones con un ancho de 400.1px-600px, y siempre será azul para resoluciones con un ancho de 400px o menos.