CSS特殊性，媒體查詢和最小寬度

Question

我正在重新設計我的博客，並考慮到響應式網頁設計和「移動優先」方法 - 總之我試圖使用最小寬度來避免任何類型的複製或css ..沒有顯示：沒有等..

我的問題是，當我確實需要覆蓋CSS值時，較低的最小寬度優先。例如：

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

我希望當我在600px的決議和上面得到2.2em H2，而是我得到1.7em。在我開發工具我看到2.2em聲明在那裏，但另一個優先..它沒有任何意義！

我可以繼續使用最小寬度，並在不使用更強選擇器或最大寬度的情況下有效覆蓋更高分辨率的聲明。

Answer 1

我期望當我在600px及以上的分辨率下獲得2.2em h2，而是我獲得1.7em ..在我的開發工具中，我看到2.2em聲明在那裏，但另一個優先..這是沒有道理的！

它是有道理的。如果媒體滿足min-width: 600px，那麼它也應該滿足min-width: 320px;換句話說，至少600像素寬的任何東西都至少320像素寬，因爲600大於320.

由於兩個媒體查詢的計算結果都爲true，最後發生的規則優先於級聯，你的代碼等價於：

h2 { font-size: 2.2em; } 
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; } 

這解釋了爲什麼2.2em出現在你的開發工具，但並沒有採取明顯的影響。

最簡單的解決方法是切換你@media塊左右所以你的規則級聯以正確的順序：

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