所有瀏覽器都支援 CSS 中的嵌套 @media 規則嗎？

在CSS 中嵌套@media 規則：瀏覽器支援和一致性

在CSS 中嵌套@media 規則一直是相關瀏覽器支援的混亂主題。問題出現了，「哪些瀏覽器支援此功能，我們如何確保一致性？」

瀏覽器支援

первоначально，不支援@media 規則的嵌套CSS2.1。然而，CSS3 引入了此功能，如條件規則模組中所述。現代瀏覽器現在普遍支援 @media at 規則的嵌套，Microsoft Edge 是唯一的例外。

一致性

問題中提供的程式碼顯示了嵌套的@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;    
        }
    }
}

在CSS3 中，此程式碼應按預期工作，並根據樣式應用適當的樣式指定的媒體查詢。 Firefox 與其他瀏覽器之間差異的原因是 Firefox 已經實作了 CSS3 規範，而其他瀏覽器仍然符合較舊的 CSS2.1 標準，該標準不允許嵌套 @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;
    }
}

透過巢狀，程式碼將在所有瀏覽器中表現一致，直到所有主要瀏覽器完全實作CSS3。

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