问在CSS中嵌套@media规则

EN

对于那些简单地寻找“哪些浏览器支持@media规则嵌套？”的人来说，简短的答案是所有现代浏览器，包括火狐、Safari、Chrome (及其衍生产品)和Microsoft Edge，现在都支持CSS Conditional 3中描述的@media at-rules嵌套。问题中嵌套的@media at-rules的代码现在应该可以在任何地方正常工作，除了Internet Explorer (它是no longer being updated with new features，这意味着任何版本的IE都不会支持这一功能)。

这个特性在CSS2.1中是不存在的，因为当时只存在媒体类型，你可以简单地用逗号来分组，这就解释了为什么在第一次提出这个问题的时候，对这个问题的支持非常差。

以下是在考虑到这些历史局限性的情况下对原始问题的分析。

为了让我们理解到底发生了什么，我们需要澄清一些术语上的混淆。

您拥有的代码引用的是@media规则，而不是太多的媒体查询-媒体查询本身是@media标记后面的组件，而规则是由@media、媒体查询和嵌套在其大括号集中的规则组成的整个代码块。

当涉及到在CSS中使用媒体查询时，这可能会引起许多人的混淆，以及您的特定情况，即导入的样式表中的@media规则即使在@import伴随另一个媒体查询的情况下也能正常工作。请注意，在@media和@import规则中都可以进行媒体查询。它们是一样的东西，但它们被用来以不同的方式限制性地应用样式规则。

现在，这里的实际问题是嵌套的@media规则是not valid in CSS2.1的，因为不允许在@media规则中嵌套任何at-rules。然而，在CSS3中，事情似乎完全不同。也就是说，条件规则模块states very clearly @media规则可以嵌套，甚至提供了一个示例：

例如，

使用以下嵌套规则集：

@media print {浮动规则(1) */ /*打印时隐藏导航控件*/ #导航{显示:无} @media (最大宽度:12厘米){ /*规则(2) */ /*打印到窄页时将备注保留在流动中*/ .note { float:无}

标记为(1)的规则的条件对于打印介质为真，并且当显示区域(对于打印介质为页框)的宽度小于或等于12 to时，标记为(2)的规则的条件为真。因此，无论何时将该样式表应用于打印介质，都应用规则‘#导航{显示:无}’，并且仅当样式表应用于打印介质并且页面框的宽度小于或等于12厘米时，才应用规则‘.note{ float: none }’。

此外，看起来Firefox正在遵循这个规范并相应地处理规则，而其他浏览器仍然以CSS2.1的方式对待它。

然而，Syntax module中的语法还没有更新以反映这一点；它仍然不允许在@media规则中嵌套at-rules。无论如何，这个规范都是要重写的，所以我想这并不重要。

基本上，CSS3允许它(等待重写语法模块)，但不允许CSS2.1 (因为它既不定义媒体查询，也不允许嵌套的@media规则块)。虽然至少有一个浏览器已经开始支持新规范，但我不会说其他浏览器有buggy；相反，我会说它们还没有跟上，因为它们实际上符合更旧、更稳定的规范。

最后，您的@import之所以能够工作，是因为@import能够在媒体查询的帮助下有条件地工作。但是，这与导入的样式表中的@media规则无关。这实际上是两件不同的事情，所有的浏览器都是这样对待的。

要使代码跨浏览器一致地工作，您可以使用@import语句，或者，因为您的两个规则都使用min-width，所以只需删除@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;
    }
}