css3 - standard - media query min and max

Especificidad CSS, consultas de medios y ancho mínimo.

Question

Estoy rediseñando mi blog teniendo en cuenta el diseño web adaptable, y el método "móvil primero". En resumen, estoy tratando de usar min-width para evitar cualquier tipo de replicación o css.

Mi problema es que cuando necesito sobreescribir un valor de CSS, el ancho mínimo inferior tiene prioridad. Ejemplo:

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

Yo esperaría que cuando esté en resoluciones de 600px y superiores obtengan un 2.2em h2, pero en lugar de eso obtengo 1.7em ... En mis herramientas de Dev veo que la declaración de 2.2em está ahí, pero la otra tiene prioridad. ¡No tiene sentido!

¿Puedo seguir usando los anchos mínimos y sobrescribir las declaraciones de manera efectiva en resoluciones más altas sin usar selectores más fuertes o ancho máximo?

Answer 1

Yo esperaría que cuando esté en resoluciones de 600px y superiores obtengan un 2.2em h2, pero en lugar de eso obtengo 1.7em ... En mis herramientas de Dev veo que la declaración de 2.2em está ahí, pero la otra tiene prioridad. ¡No tiene sentido!

Que tiene sentido. Si el medio cumple min-width: 600px , entonces también debe cumplir min-width: 320px ; en otras palabras, cualquier cosa que tenga al menos 600 píxeles de ancho también tiene al menos 320 píxeles de ancho, porque 600 es mayor que 320.

Dado que las dos consultas de los medios se evalúan como verdaderas, la regla que aparece al final tiene prioridad en la cascada, haciendo que su código sea equivalente a esto:

h2 { font-size: 2.2em; }
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }

Eso explica por qué el 2.2em aparece en sus herramientas de desarrollador pero no tiene un efecto aparente.

La solución más sencilla es cambiar los bloques de @media para que las reglas se coloquen en el orden correcto:

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}