la especificidad de CSS, consultas y medios min-width del "primer móvil" método

Question

Estoy rediseñando mi blog con el diseño web de respuesta en mente, y - En fin, yo estoy tratando de utilizar min-width para evitar cualquier tipo de replicación o css .. sin visualización: de ninguna etc ..

Mi problema es que cuando yo lo necesito a un exceso de escribir un valor CSS, menor será min-width 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 estoy en la resolución de 600px y por encima de conseguir un h2 2.2em, pero en su lugar me sale 1.7em .. En mis herramientas Dev veo que la declaración es 2.2em allí, pero el otro tiene prioridad ... ¡No tiene sentido!

Podría seguir usando min-anchos y sobrescribir eficazmente declaraciones en resoluciones más altas sin necesidad de utilizar selectores más fuertes o max-anchura ..?

Answer 1

Esperaría cuando tengo una resolución de 600px y superior para obtener una 2.2em h2, pero en cambio obtengo 1.7em .. En mis herramientas Dev veo que la declaración 2.2em está ahí, pero el otro tiene prioridad ... ¡No tiene sentido!

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 tenga al menos 320 píxeles de ancho, porque 600 es mayor que 320.

Dado que ambas consultas de medios se evalúan como verdaderas, la última regla que ocurre tiene prioridad en la cascada, lo que hace su código 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 desarrollo, pero no tiene efecto aparente.

La solución más fácil es cambiar sus @media cuadras a la redonda para que su reglas en cascada 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; } 
}