La cascada es lo que hace que el CSS sea especial y poderoso. Pero en el caso de consultas de medios, se superponen.puede parece problematico

Considere el siguiente CSS (continuandoreglas para la superposición de consultas de medios CSS):

/* Standard - for all screens below 20em */

body { color: black; font-size: 1em; }

/* Query A - slightly wider, mobile viewport */

@media (min-width: 20em) and (max-width: 45em) {
    body { color: red; } /* supposed to be unique for this width */
}

/* Query B - everything else */

@media (min-width: 45em) {
    body { font-size: larger; } /* because viewport is bigger */
}

Entonces, cuando la pantalla tiene exactamente 45em de ancho, la superposición en 45emSerá tratado De acuerdo con el estándar CSS en cascada:

Todosmax-width: 45em Primero se aplicarán las definiciones,y todomin-width: 45em se aplicará a partir de entonces.

Considere estas dos condiciones:

Todo el texto normalmente seríablack, peroConsulta A es unico y tienecolor: red.Ya queConsulta b es para ventanas más grandes, su texto tiene el CSSfont-size: larger.

Por lo tanto, en un ancho de exactamente 45em, obtendríamostexto grande y rojo. ¿Cuál sería la mejor solución para evitar esto?

Veo dos posibilidades:

Re-declarar el texto para tenercolor: black enConsulta b, pero luego estás administrando dos declaraciones si eliges cambiar elcolor en el futuro. (Por supuesto, no es un problema tan grande con esta línea de código, pero imagina que hay muchas otras declaraciones y selectores).

Evite la superposición utilizando valores de píxeles comomax-width: 799px ymin-width: 800px, pero luego estás usando píxeles, supongo que podrían ser 49.9375em y 50em, respectivamente. ¿Pero qué sucede si el valor predeterminado ya no es 16em y algo se redondea? Y erantodavía no estoy seguro lo que sucede en esa brecha (¿Un agujero negro que rompe el continuo espacio-tiempo?)

Ambos tienen sus inconvenientes ... ¿alguna otra idea?