@media Abfragen - eine Regel überschreibt eine andere?

Question

Ich habe mehrere @ media Abfragen funktioniert alles gut, aber sobald ich eine höhere maximale Bildschirmbreite als 1024px setzen die Regeln für die höhere Breite wird auf alles angewendet.

@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%; 
    } 
} 

wie Sie 1024px (und auch die 800px max-width Abfrage) sehen nicht die #wrap Breite ändern und gut funktionieren. Sobald ich die 1400px max-width Abfrage hinzufüge, ändert sie sie auf 72% für ALLE Größen und macht dasselbe für jedes Element - wenn ich zum Beispiel #slider img auf einen Rand von 40px setze, wird es trotzdem ALLE Größen anzeigen Es ist nur in der maximalen Breite von 1400px.

Fehle ich etwas wirklich offensichtlich? Ich habe versucht, dies in den letzten 2 Tagen auszuarbeiten! Danke, John

Answer 1

Ich bin mir nicht sicher, ich folge völlig, aber Ihre @media Regeln schlagen vor, dies ist das Verhalten, das Sie wollen. Wenn der Bildschirm 1400 px und niedriger ist, beträgt die Breite von #wrap 72%. Dies schließt alle anderen Größen ein, die in anderen Medienabfragen erwähnt werden.

Wenn Sie zwischen 1024px und 1400px Sie es anwenden es nur wollte ändern müssen ...

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

EDIT Sie müssen auch daran denken, dass Dinge in CSS Bestellung ...

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

Bei Bildschirmen über 1024px beträgt die Breite #wrap 72%, da sie nur der ersten Medienabfrage entsprechen. Wenn der Bildschirm unter 1024px liegt, ist die Breite #wrap 100%, obwohl beide Medienanfragen übereinstimmen. Die CSS, die für einen Bildschirm unter 1024px gerendert wird aussehen wird ...

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

Regeln definiert später im Stylesheet überschreibt frühere Regeln http://www.w3.org/TR/CSS21/cascade.html#cascading-order 6.4.1 Punkt 4. Deshalb, wenn Sie die Reihenfolge der Regeln getauscht .

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

Die Breite #wrap wird 72% sein für alle Bildschirm zu 1400px Größen auf, weil ein Bildschirm unter 1024px beiden Regeln sehen werden, als ob sie ...

waren, wird

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

Ein Bildschirm über 1024px siehe ...

#wrap { 
width: 72%; 
} 

Beide haben das gleiche Ergebnis.