@media consultas - ¿una regla prevalece sobre otra?

Question

Tengo varias consultas de @media que funcionan bien, pero tan pronto como pongo un ancho de pantalla mayor que 1024 px, las reglas para el ancho superior se aplican a todo.

@media screen and (max-width: 1400px) 
    { 
     #wrap { 
     width: 72%; 
     } 
    } 
@media screen and (max-width: 1024px) 
{ 
    #slider h2 { 
    width: 100%; 
    } 
    #slider img { 
    margin: 60px 0.83333333333333% 0 2.08333333333333%; 
    } 
    .recent { 
    width: 45.82%; 
    margin: 10px 2.08333333333334% 0 1.875%; 
    } 
} 

como se puede ver de 1024px (y también la consulta 800px de ancho máximo) no cambian el ancho #wrap y funcionan bien. Tan pronto como agregue la consulta de ancho máximo de 1400px los cambia a 72% para TODOS los tamaños y hace lo mismo con cualquier elemento; por ejemplo, si configuro #slider img para tener un margen de 40px, se mostrará en TODOS los tamaños aunque está solo en el ancho máximo de 1400px.

¿Me falta algo realmente obvio? ¡He estado intentando resolver esto los últimos 2 días! Gracias, John

Answer 1

No estoy seguro de seguir completamente, pero sus reglas @media sugieren que este es el comportamiento que desea. Si la pantalla es de 1400px e inferior, el ancho de #wrap será del 72%, esto incluye todos los demás tamaños mencionados en otras consultas de medios.

Si usted quisiera que sólo se aplican entre 1024px de 1400px y necesita cambiar a ...

@media screen and (max-width: 1400px) and (min-width: 1024px) 
{ 
    #wrap { 
    width: 72%; 
    } 
} 

EDITAR También hay que recordar que ordenar las cosas en CSS ...

@media screen and (max-width: 1400px) 
{ 
    #wrap { 
    width: 72%; 
    } 
} 
@media screen and (max-width: 1024px) 
{ 
    #wrap { 
    width: 100%; 
    } 
} 

Para pantallas de más de 1024px, el ancho de #wrap será del 72%, ya que solo coincidirán con la primera consulta de medios. Si la pantalla está por debajo de 1024px, el ancho de #wrap será del 100%, aunque coincidirá con las consultas de los medios. El CSS que se procesa para una pantalla de 1024px bajo se verá así ...

#wrap { 
width: 72%; 
} 
#wrap { 
width: 100%; 
} 

reglas definidas más adelante en la hoja de estilo anula reglas anteriores http://www.w3.org/TR/CSS21/cascade.html#cascading-order 6.4.1 punto 4. Por lo tanto, si cambiado el orden de las reglas .

@media screen and (max-width: 1024px) 
{ 
    #wrap { 
    width: 100%; 
    } 
} 
@media screen and (max-width: 1400px) 
{ 
    #wrap { 
    width: 72%; 
    } 
} 

El ancho de #wrap será del 72% para todos los tamaños de pantalla de hasta 1400px porque una pantalla de 1024px bajo verá tanto las reglas como si fueran ...

#wrap { 
width: 100%; 
} 
#wrap { 
width: 72%; 
} 

una pantalla de más de 1024px de voluntad ver ...

#wrap { 
width: 72%; 
} 

Ambos tienen el mismo resultado.