瀏覽器對 CSS 中嵌套 @media 規則的支援有多一致？

在CSS 中嵌套@media 規則：瀏覽器支持和兼容性

問題：

如何不同瀏覽器對嵌套@media 規則的支援是否一致？為什麼提供的程式碼在不同瀏覽器中顯示不同，這種不一致背後的原因是什麼？可以解決此問題以實現一致的樣式嗎？

答案：

瀏覽器支援

嵌套@media 規則不是CSS2.1 中的有效實踐，這就是為什麼瀏覽器對此功能的支援差異很大的原因。然而，隨著 CSS Conditional 3 的引入，嵌套 @media 規則成為所有現代瀏覽器支援的功能，包括 Firefox、Safari、Chrome 和 Microsoft Edge。

嵌套相容性

問題中提供的程式碼涉及嵌套@media規則。雖然 @media 規則可以嵌套在 CSS3 中的其他 @media 規則中，但 CSS2.1 中不允許這種嵌套。因此，仍然遵循 CSS2.1 的瀏覽器（例如​​舊版的 Internet Explorer）無法正確處理嵌套 @media 規則。

不一致的原因

Firefox實現了較新的 CSS Conditional 3 規範，允許其按預期解釋和應用嵌套 @media 規則。另一方面，其他瀏覽器（例如​​ Opera、Chrome 和 IE9）遵循較舊的 CSS2.1 規範，該規範不支援嵌套 @media 規則。因此，他們會回退到應用程式最裡面的@media規則中定義的樣式，從而導致樣式上的差異。

實現一致性

確保整個樣式的一致性所有瀏覽器，建議刪除嵌套的@media規則。這可以透過刪除第一個@media 規則中的第二個@media 規則來完成：

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

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

刪除嵌套規則後，樣式應在支援CSS Conditional 3 和CSS2 的所有現代瀏覽器中一致應用。 1.

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