嵌套 CSS @media 規則在所有瀏覽器中一致工作嗎？

在CSS 中嵌套@media 規則，重新檢視

最初的問題探討了涉及嵌套@media 規則的CSS 程式碼片段的渲染不一致各種瀏覽器。以下是基於目前瀏覽器支援狀態的更新分析：

CSS3 中的巢狀@media 規則

根據CSS3 中的CSS 條件規則模組，巢狀@ media規則現已完全支援。以下語法有效：

@media print {
  #navigation { display: none }
  @media (max-width: 12cm) {
    .note { float: none }
  }
}

瀏覽器支援

現代瀏覽器，包括Firefox、Safari、Chrome、Microsoft Edge 和Opera，現在支援嵌套@media CSS Conditional 3 中定義的規則。 Internet Explorer 不支援此功能。

原始內容問題

原始問題中的程式碼示範了嵌套的 @media 規則在瀏覽器中無法一致運作。這是由於 CSS2.1 缺乏對嵌套的支持，而 CSS2.1 是當時舊版瀏覽器支援的規範。

解析度

對於支援嵌套的瀏覽器不支援嵌套@media規則，解決方法是刪除嵌套並編寫多個@media規則分別：

@media screen and (min-width: 480px) {
    body {
        background-color: #6aa6cc;
        color: #000;
    }
}

@media screen and (min-width: 768px) {
    body {
        background-color: #000;
        color: #fff;
    }
}

帶有媒體條件的@import

帶有媒體條件的@import語句一致工作的原因是因為它有條件地應用樣式表，而不是因為它可以在@media 內嵌套

結論

根據 CSS Conditional 3 規範，嵌套 @media 規則現在在現代瀏覽器中得到廣泛支持。對於不支援此功能的舊版瀏覽器，一個簡單的解決方法是使用單獨的 @media 規則。

以上是嵌套 CSS @media 規則在所有瀏覽器中一致工作嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！