superposicion - ¿Cuáles son las reglas para la superposición de consulta de medios CSS?

superposición de pantalla samsung j7

Question

¿Cómo espaciamos las consultas de los medios con precisión para evitar la superposición?

Por ejemplo, si consideramos el código:

@media (max-width: 20em) {
    /* for narrow viewport */
}

@media (min-width: 20em) and (max-width: 45em) {
    /* slightly wider viewport */
}

@media (min-width: 45em) {
    /* everything else */
}

¿Qué pasará, en todos los navegadores compatibles, exactamente a 20em y 45em?

He visto que la gente usa: cosas como 799px y luego 800px, pero ¿qué pasa con un ancho de pantalla de 799.5 px? (Obviamente no en una pantalla normal, ¿pero una retina?)

Estoy más curioso acerca de la respuesta aquí teniendo en cuenta la especificación.

Answer 1

¿Cuáles son las reglas para la superposición de consulta de medios CSS?

Cascada.

@media reglas @media son transparentes para la cascada, por lo que cuando dos o más reglas de @media coinciden al mismo tiempo, el navegador debe aplicar los estilos en todas las reglas que coinciden y resolver la cascada en consecuencia. ¹

¿Qué pasará, en todos los navegadores compatibles, exactamente a 20em y 45em?

Con exactamente 20em de ancho, su primera y segunda consulta de medios coincidirán. Los navegadores aplicarán estilos en ambas reglas de @media y en cascada en consecuencia, de modo que si hay reglas conflictivas que se deben anular, la última declarada gana (contabilizando selectores específicos,! !important , etc.). Del mismo modo para la segunda y tercera consulta de medios cuando la ventana gráfica tiene exactamente 45m de ancho.

Teniendo en cuenta su código de ejemplo, con algunas reglas de estilo actual agregadas:

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

Cuando la ventana gráfica del navegador tiene exactamente 20m de ancho, ambas consultas de medios serán verdaderas. Por la cascada, display: block anula la display: none y float: left se aplicará a la float: left en cualquier elemento con la clase .sidebar .

Puede pensar que se trata de aplicar reglas como si las consultas de los medios no estuvieran allí para comenzar:

.sidebar { display: none; }
.sidebar { display: block; float: left; }

Otro ejemplo de cómo se produce la cascada cuando un navegador coincide con dos o más consultas de medios se puede encontrar en esta otra respuesta .

Tenga en cuenta, sin embargo, que si tiene declaraciones que no se superponen en ambas reglas @media , entonces se aplicarán todas esas reglas. Lo que sucede aquí es una unión de las declaraciones en ambas reglas de @media , no solo la última descarta completamente la anterior ... lo que nos lleva a su pregunta anterior:

¿Cómo espaciamos las consultas de los medios con precisión para evitar la superposición?

Si desea evitar la superposición, solo necesita escribir consultas de medios que sean mutuamente excluyentes.

Recuerde que los prefijos mínimo y max- significan "mínimo inclusivo" y "máximo inclusivo"; esto significa que (min-width: 20em) y (max-width: 20em) coincidirán con una ventana que tenga exactamente 20m de ancho.

Parece que ya tienes un ejemplo, lo que nos lleva a tu última pregunta:

He visto que la gente usa: cosas como 799px y luego 800px, pero ¿qué pasa con un ancho de pantalla de 799.5 px? (Obviamente no en una pantalla normal, ¿pero una retina?)

Esto no estoy del todo seguro; todos los valores de píxeles en CSS son píxeles lógicos, y me ha costado encontrar un navegador que informe un valor de píxel fraccionario para un ancho de ventana. Intenté experimentar con algunos iframes pero no he podido encontrar nada.

Según mis experimentos, Safari en iOS redondea todos los valores de píxels fraccionarios para asegurar que max-width: 799px uno de max-width: 799px y min-width: 800px , incluso si la ventana gráfica es realmente 799.5px (que aparentemente coincide con la anterior).

¹ _{Aunque nada de esto se menciona explícitamente ni en el módulo Reglas condicionales ni en el módulo Cascade (el último de los cuales está actualmente programado para una reescritura), se supone que la cascada tiene lugar normalmente, ya que la especificación simplemente dice aplicar estilos en cualquier y todas las reglas @media que coinciden con el navegador o los medios.}

Answer 2

Se puede usar calc() para evitar esto (min-width: 50em and max-width: calc(50em - 1px) se apilan correctamente), pero el soporte del navegador es deficiente y no lo recomendaría.

@media (min-width: 20em) and (max-width: calc(45em - 1px)) {
    /* slightly wider viewport */
}

Infos:

• https://developer.mozilla.org/en-US/docs/CSS/calc
• http://caniuse.com/calc
• http://www.w3.org/TR/css3-values/#calc

Algunos otros mencionaron, no usar la unidad em ayudaría en el apilamiento de consultas.