在CSS中嵌套@media规则

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

检查link

Firefox：黑色，白色文字。

歌剧，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中使用媒体查询时，这可能导致许多人之间的混乱，以及在导入的样式表中的@media规则可以正确工作的特定情况下，即使@import伴随着另一个媒体查询。请注意，媒体查询可以在@media和@import规则中发生。他们是同样的事情，但他们被用来限制性地以不同的方式应用样式规则。

现在，这里的实际问题是嵌套的@media规则是not valid in CSS2.1，因为你不允许在@media规则中嵌套任何规则。但是，CSS3中的东西看起来很不同。也就是说，条件规则模块states very clearly @media规则可以嵌套，甚至提供一个例子：

For example,with this set of nested rules:

06000

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.

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

Syntax module的语法没有更新，以反映这一点，虽然;它仍然不允许@media规则内的规则嵌套与CSS2.1一样。这个规范预定为重写反正，所以我想这不要紧。

基本上，CSS3允许它(等待重写语法模块)，但不是CSS2.1(因为它既不定义媒体查询也不允许嵌套的@media规则块)。而且至少有一个浏览器开始支持新规范，我不会调用其他浏览器的bug;相反，我会说，他们根本没有赶上，因为他们真的符合一个更老的，更稳定的规格。

最后，你的@import工作的原因是因为@import能够在媒体查询的帮助下有条件地工作。但是，这与导入的样式表中的@media规则没有关系。这些事实上是两个单独的事情，并被所有浏览器视为这样。

为了使您的代码在不同浏览器中保持一致，您可以使用@import语句，或者，由于两个规则都使用最小宽度，因此只需删除@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;
    }
}

在CSS中嵌套@media规则

解决方法

相关推荐