在媒體查詢中使用「min-width」時，如何確保 CSS 規則正確應用？

了解CSS 特異性、媒體查詢和最小寬度

使用「移動優先」方法實現響應式網頁設計時，最小- width允許設計者根據設備寬度定義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 , 最後出現：

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

這確保了600px 以上解析度所需的CSS 規則生效，即使它的min-width 較低值。

以上是在媒體查詢中使用「min-width」時，如何確保 CSS 規則正確應用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！