使用最小寬度的媒體查詢時如何避免 CSS 特異性衝突？

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

直覺上，人們會預期 2.2em 字體大小適用於 600px 以上的解析度。但是，如您所觀察到的，320px 最小寬度媒體查詢中定義的 1.7em 字體設定會覆蓋 2.2em 設定。

出現這種情況是因為對於高於 600px 的分辨率，兩個媒體查詢的計算結果都為 true。在這種情況下，CSS 級聯中最後聲明的規則（即 1.7em 設定）優先。

克服優先級問題

要解決此優先級問題，您有兩個主要選項：

1. 重新排列媒體查詢：切換媒體查詢的順序，讓最小寬度較高的查詢排在最後。這可確保 2.2em 字體大小正確應用於 600px 以上的解析度。
2. 使用特異性： 透過增加額外的選擇器來提高 2.2em 規則的特異性。例如，您可以使用元素選擇器 h2.main 覆寫 320px 最小寬度查詢中定義的通用 h2 規則。

推薦

使用通常建議使用第一個選項，因為它可以保持 CSS 結構的清晰度並避免進行特殊性調整。透過如下重新排列媒體查詢，您可以確保實現您想要的行為：

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

以上是使用最小寬度的媒體查詢時如何避免 CSS 特異性衝突？的詳細內容。更多資訊請關注PHP中文網其他相關文章！