如何正確進行最小寬度媒體查詢級聯？

透過最小寬度媒體查詢級聯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; }
}

當螢幕寬度為 600 像素或更大時，兩個媒體查詢都為 true。然而，第二條規則在級聯中出現得較晚，因此它優先並應用較小的 1.7em 字體大小。

分辨率

有效地覆蓋更高版本中的聲明使用min-widths 分辨率，而不需要使用更強的選擇器或max-width，您可以切換媒體查詢的順序：

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

這可以確保當螢幕寬度至少為600 像素。這將為您提供您期望的級聯特異性，並優先考慮較高的最小寬度。

以上是如何正確進行最小寬度媒體查詢級聯？的詳細內容。更多資訊請關注PHP中文網其他相關文章！