Verwenden Sie mehrere CSS-Medienabfragen, aber nur die größte?

Question

Ich habe mehrere Media-Abfragen ausgeführt, jedoch verwendet es nur die größte Abfrage im Gegensatz zu der, die korrekt ist.

Siehe hier codepen: http://codepen.io/Not_A_Fax_Machine/pen/wdyjWO

@media (max-height: 346px) { 
    li.sidebar-list { 
    max-height: 69px !important; 
    } 
} 
@media (max-height: 480px) { 
    li.sidebar-list { 
    max-height: 96px !important; 
    } 
} 

Answer 1

CSS-Medienabfrage Stapelung der geringsten Breite von der größten Breite bis zu getan werden sollte. Dafür steht CSS - Cascading Stylesheets.

Alles auf Linie 2 überschreibt alles auf Linie 1. - darüber nachdenken, es auf diese Weise, wenn CSS

Bedeutung Schreiben Sie Ihre Medien-Abfrage sein sollte, wie folgt:

@media (max-height: 480px) { 
    li.sidebar-list { 
     max-height: 96px; 
    } 
@media (max-height: 346px) { 
    li.sidebar-list { 
     max-height: 69px; 
    } 
} 

Und auf diese Weise müssen Sie nicht !important verwenden, weil die Verwirrung jetzt vorbei sein sollte.

Answer 2

Ich hoffe, das ist kein Problem mit größten Abfrage tatsächlich wird CSS von oben nach unten, so wird es schließlich letzten CSS rendern Ihre größte Abfrage gibt es unten, so Render letzte Abfrageeigenschaften können Sie mischen und überprüfen.

hoffe meine Antwort Ihnen helfen.