Question

不同浏览器的支持似乎有所不同。

检查link

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中嵌套媒体查询似乎确实有效。

e.g：

的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;
    }
}

Answer 1

对于那些只是寻找“哪些浏览器支持嵌套@media规则？”的答案，简短的回答是所有现代浏览器，包括Firefox，Safari，Chrome（及其衍生产品）和Microsoft Edge ，现在支持@media at {规则}的嵌套，如CSS Conditional 3中所述。带有嵌套@media at-rules的问题中的代码现在应该可以在任何地方正常工作，但Internet Explorer（no longer being updated with new features除外，这意味着没有任何版本的IE支持此功能）。< / p>

CSS2.1中不存在此功能，因为当时只能使用逗号分组时存在媒体类型，这解释了为什么在首次提出此问题时对此的支持非常差。

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

需要清理一些术语混淆，以便我们了解到底发生了什么。

您拥有的代码引用@media规则，而不是媒体查询 - 媒体查询本身是遵循@media令牌的组件，而规则是整个代码块组成@media，媒体查询以及嵌套在大括号内的规则。

在CSS中使用媒体查询时，这可能会引起许多人的混淆，以及导入样式表中@media规则正常工作的特定情况，即使@import伴随着@media另一个媒体查询。请注意，媒体查询可以同时发生在@import和@media规则中。它们是相同的，但它们习惯于以不同的方式限制性地应用样式规则。

现在，实际问题是嵌套的@media规则是not valid in CSS2.1，因为您不允许在@media规则中嵌套任何 at-rules 。但是，CSS3中的情况似乎有所不同。即，即使提供示例，@media print { // rule (1) #navigation { display: none } @media (max-width: 12cm) { // rule (2) .note { float: none } } }规则可以嵌套的条件规则模块states very clearly：

例如，使用这组嵌套规则：
@media
标记为（1）的规则的条件对于打印介质为真，并且当显示区域（对于打印介质为页面框）的宽度小于时，标记为（2）的规则的条件为真。或等于12厘米。因此，只要将此样式表应用于打印介质，就会应用规则“#navigation {display：none}”，并且仅当样式表应用于打印介质和宽度时才应用规则“.note {float：none}”页面框的小于或等于12厘米。

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

Syntax module中的语法尚未更新以反映这一点;与CSS2.1一样，它仍然不允许在@media规则中嵌套at-rules。无论如何，这个规范都是为了重写，所以我想这没关系。

基本上，CSS3允许它（等待重写语法模块），但不允许CSS2.1（因为它既不定义媒体查询也不允许嵌套@import规则块）。虽然至少有一个浏览器已经开始支持新规范，但我不会将其他浏览器称为bug;相反，我会说他们还没有赶上，因为他们真的符合更古老，更稳定的规范。

最后，@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; } }规则的嵌套：

{{1}}

在CSS中嵌套@media规则

的index.html

importer.css

media.css

1 个答案: