嵌套 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中文网其他相关文章！