在 CSS 中嵌套 @media 规则
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11746581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nesting @media rules in CSS
提问by James South
Support seems to be different across browsers..
不同浏览器的支持似乎不同..
Check the link
检查链接
Firefox: Black with white text.
火狐：黑底白字。
Opera, Chrome, IE9: Blue with black text.
Opera、Chrome、IE9：蓝色和黑色文字。
Which is correct and how would I make it consistent?
哪个是正确的，我如何使它保持一致？
The code
编码
@media screen and (min-width: 480px) {
body{
background-color:#6aa6cc;
color:#000;
}
@media screen and (min-width: 768px) {
body{
background-color:#000;
color:#fff;
}
}
}
?
?
Interestingly enough it appears that nesting media queries within a conditional @importdoes seem to work.
有趣的是，在条件@import中嵌套媒体查询似乎确实有效。
e.g:
例如：
Index.html
索引.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
导入器.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;
}
}
回答by BoltClock
For those simply looking for an answer to "Which browsers support nesting of @mediarules?", the short answer is that all modern browsers, including Firefox, Safari, Chrome (and its derivatives), and Microsoft Edge, now support nesting of @mediaat-rules as described in CSS Conditional 3. The code in the question with the nested @mediaat-rules should now work correctly everywhere, with the exception of Internet Explorer (which is no longer being updated with new features, meaning no version of IE will ever support this feature).
对于那些只是寻找“哪些浏览器支持@media规则嵌套？”的答案的人来说，简短的回答是所有现代浏览器，包括 Firefox、Safari、Chrome（及其衍生产品）和 Microsoft Edge，现在都支持@media规则的嵌套如CSS 条件 3 中所述。带有嵌套@mediaat 规则的问题中的代码现在应该可以在任何地方正常工作，但 Internet Explorer 除外（不再使用新功能进行更新，这意味着任何版本的 IE 都不会支持此功能）。
This feature did not exist in CSS2.1, since only media types existed at the time which you could simply group with a comma, which explains why support for this was very poor at the time this question was first asked.
这个特性在CSS2.1 中不存在，因为当时只有媒体类型存在，你可以简单地用逗号分组，这解释了为什么在第一次提出这个问题时对此的支持非常差。
What follows is an analysis of the original question with these historical limitations in mind.
接下来是在考虑到这些历史局限性的情况下对原始问题的分析。
There's a bit of terminology confusion that needs clearing up in order for us to understand what exactly is happening.
有一些术语混淆需要澄清，以便我们了解到底发生了什么。
The code you have refers to @mediarules, and not so much media queries — the media query itself is the component that follows the @mediatoken, whereas the rule is the entire block of code consisting of @media, the media query, and the rules nested within its set of curly braces.
您拥有的代码指的是@media规则，而不是媒体查询——媒体查询本身是跟在@media令牌后面的组件，而规则是由@media、媒体查询和嵌套在其集合中的规则组成的整个代码块的花括号。
This may cause confusion among many when it comes to using media queries in CSS, as well as your specific case where a @mediarule in an imported stylesheet works correctly even when the @importis accompanied by another media query. Notice that media queries can occur in both @mediaand @importrules. They're the same thing, but they're being used to restrictively apply style rules in different ways.
在 CSS 中使用媒体查询时，这可能会导致许多人之间的混淆，以及您的特定情况，@media即导入的样式表中的规则即使@import伴随另一个媒体查询也能正常工作。请注意，媒体查询可以同时出现在@media和@import规则中。它们是相同的东西，但它们被用来以不同的方式限制性地应用样式规则。
Now, the actual issue here is that nested @mediarules are not valid in CSS2.1because you're not allowed to nest anyat-rules within @mediarules. However, things seem quite different in CSS3. Namely, the Conditional Rules module states very clearlythat @mediarules canbe nested, even providing an example:
现在，这里的实际问题是嵌套@media规则在 CSS2.1 中无效，因为不允许在规则中嵌套任何at@media规则。然而，CSS3 中的情况似乎完全不同。即，条件规则模块非常清楚地说明@media规则可以嵌套，甚至提供了一个示例：
For example, with this set of nested rules:
@media print { // rule (1) #navigation { display: none } @media (max-width: 12cm) { // rule (2) .note { float: none } } }the condition of the rule marked (1) is true for print media, and the condition of the rule marked (2) is true when the width of the display area (which for print media is the page box) is less than or equal to 12cm. Thus the rule ‘#navigation { display: none }' applies whenever this style sheet is applied to print media, and the rule ‘.note { float: none }' is applied only when the style sheet is applied to print media and the width of the page box is less than or equal to 12 centimeters.
例如，使用这组嵌套规则：
@media print { // rule (1) #navigation { display: none } @media (max-width: 12cm) { // rule (2) .note { float: none } } }标号（1）的规则条件对打印介质为真，标号（2）的规则条件为当显示区域（对打印介质为页框）的宽度小于等于12 厘米。因此，规则“#navigation { display: none }”适用于将此样式表应用于打印媒体时，规则“.note { float: none }”仅在样式表应用于打印媒体和宽度时应用页框的长度小于或等于 12 厘米。
Furthermore, it looks like Firefox is following this specification and processing the rules accordingly, whereas the other browsers are still treating it the CSS2.1 way.
此外，看起来 Firefox 正在遵循此规范并相应地处理规则，而其他浏览器仍在以 CSS2.1 方式对其进行处理。
The grammar in the Syntax modulehasn't been updated to reflect this yet, though; it still disallows nesting of at-rules within @mediarules as with CSS2.1. This specification is slated for a rewrite anyway, so I guess this doesn't matter.
不过，语法模块中的语法尚未更新以反映这一点；@media与 CSS2.1 一样，它仍然不允许在规则中嵌套 at 规则。无论如何，该规范将被重写，所以我想这无关紧要。
Basically, CSS3 allows it (pending rewriting the Syntax module), but not CSS2.1 (because it neither defines media queries nor allows nested @mediarule blocks). And while at least one browser has begun supporting the new spec, I wouldn't call other browsers buggy; instead, I'll say that they simply haven't caught up yet as they're really conforming to an older, more stable spec.
基本上，CSS3 允许它（等待重写语法模块），但不允许 CSS2.1（因为它既不定义媒体查询也不允许嵌套@media规则块）。虽然至少有一款浏览器开始支持新规范，但我不会认为其他浏览器有问题；相反，我会说他们还没有赶上，因为他们真的符合更旧、更稳定的规范。
Lastly, the reason why your @importworks is because @importis able to work conditionally with the help of a media query. However this has no relation to the @mediarule in your imported stylesheet. These are in fact two separate things, and are treated as such by all browsers.
最后，您的@import作品的原因是因为@import能够在媒体查询的帮助下有条件地工作。但是，这与@media导入的样式表中的规则无关。这实际上是两个独立的东西，所有浏览器都这样对待。
To make your code work consistently across browsers, you can either use your @importstatement, or, since both of your rules use min-width, simply remove the nesting of your @mediarules:
为了使您的代码在浏览器中一致地工作，您可以使用您的@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;
}
}
