所有浏览器都支持 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中文网其他相关文章！