在CSS中嵌套@media规则
支持似乎是不同的浏览器..
检查链接
Firefox：黑色，白色文字。
Opera，Chrome，IE9：蓝色，黑色文字。
这是正确的，我将如何使其一致？
代码
@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中嵌套媒体查询似乎是行得通的。
例如：
的index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Media test</title> <link rel="stylesheet" type="text/css" href="importer.css" /> </head> <body> <h1>Why is this not consistent.</h1> </body> </html>
importer.css
@import url(media.css) screen and (min-width: 480px);
media.css
body { background-color: #6aa6cc; color: #000; } @media screen and (min-width:768px) { body { background-color: #000; color: #fff; } }
简单的答案是，虽然在CSS3中允许嵌套@media规则（而不仅仅是媒体查询），但在CSS2.1中是不允许的，主要是因为没有理由让媒体查询不能看到存在。
Firefox是第一个支持嵌套的@media规则的网站，但是自从这个答案首次发布以来，其他浏览器已经慢慢赶上来了。 也就是说，Chrome（以及类似的Blink Opera）已经被更新以支持它。
据我所知，Safari和IE仍然不支持。
有一些术语混淆，需要清理，以便我们了解究竟发生了什么。
您所使用的代码是指@media规则，而不是媒体查询 – 媒体查询本身就是@media标记之后的组件，而规则则是由@media组成的整个代码块，媒体查询和嵌套在大括号内的规则。
这可能会导致在CSS中使用媒体查询时出现混淆，以及在input样式表中的@media规则正常工作的情况下，即使@import伴随着另一个媒体查询。 请注意，媒体查询可能出现在@media和@import规则中。 它们是一样的，但是它们被用来以不同的方式限制性地应用样式规则。
现在，这里的实际问题是，嵌套的@media规则在CSS2.1中无效，因为您不允许在@media规则中嵌套任何 at-rules。 不过，CSS3中的东西看起来很不一样。 也就是说，条件规则模块非常清楚地表明@media规则可以嵌套，甚至提供一个例子：
例如，使用这套嵌套规则：
@media print { // rule (1) #navigation { display: none } @media (max-width: 12cm) { // rule (2) .note { float: none } } }对于打印介质，标记为（1）的规则的条件是成立的，并且当显示区域的宽度（对于打印介质是页面框）小于或等于（2）的规则的条件为真12厘米。 因此，无论何时将此样式表应用于打印介质，规则“＃导航{display：none}”都适用，并且仅当样式表应用于打印介质时才应用规则“.note {float：none}”，宽度的页面框小于或等于12厘米。
此外，看起来Firefox是遵循这个规范并相应地处理规则，而其他浏览器仍然将其视为CSS2.1的方式。
尽pipe如此， 语法模块中的语法还没有更新以反映这一点。 它仍然不允许像CSS2.1一样在@media规则中嵌套规则。 这个规范无论如何都是要重写的，所以我想这不重要。
基本上，CSS3允许它（等待重写语法模块），而不是CSS2.1（因为它既不定义媒体查询也不允许嵌套的@media规则块）。 而至less有一个浏览器已经开始支持新的规范，我不会打电话给其他浏览器越野车; 相反，我会说，他们根本没有赶上，因为他们真的符合更老，更稳定的规格。
最后，您的@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; } }
