使用多個CSS媒體查詢，但它只使用最大的一個？

Question

我有多個媒體查詢正在運行，但它只使用最大的查詢，而不是正確的查詢。

看到這裏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媒體查詢堆放應該從最大寬度來完成降到最低寬度。這是什麼CSS代表 - 級聯樣式表。

第2行的一切覆蓋1號線。一切 - 想想這樣寫CSS

含義的時候，您的媒體查詢順序應該是如下：

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

這樣你就不需要使用!important，因爲混淆現在應該結束了。

Answer 2

我希望這不是一個問題最大的查詢實際上CSS將呈現上下，所以最後它會呈現最後的CSS你最大的查詢是有在底部，所以渲染可以隨機播放，並檢查最後的查詢性能。

希望我的回答能幫助你。