¿Por qué es importante el orden de las consultas de medios en CSS?

Question 1

Últimamente, he estado diseñando sitios que son más receptivos y he estado usando consultas de medios CSS con frecuencia. Un patrón que noté es que el orden en el que se definen las consultas de medios realmente importa. No lo probé en todos los navegadores, solo en Chrome. ¿Existe una explicación para este comportamiento? A 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 que se escribe la consulta.

He aquí 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 escribiera la consulta para 1024x600 en el último, el navegador la ignoraría y aplicaría el valor de margen especificado al 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 medios es correcta, el orden no debería importar, pero parece que sí. ¿Cuál podría ser la razón?

Question 2

Eso es por diseño de CSS - Hoja de estilo en cascada.

Significa que, si aplica dos reglas que colisionan sobre los mismos elementos, elegirá la última que fue declarada, a menos que la primera tenga el !importantmarcador o sea más específica (ej. html > bodyVs solo body, la última es menos específica).

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. De hecho, ambas reglas coinciden, 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).

Question 3

O simplemente puede agregar un ancho mínimo 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;
  }
}

Expandir fragmento

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.