在CSS中嵌套@media规则

冷善

2023-03-14

问题内容：

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

检查链接]

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

问题答案：

对于那些只是寻找“哪些浏览器支持@media规则嵌套？”答案的人，简短的答案是所有现代浏览器（包括Firefox，Safari，Chrome（及其派生产品）和Microsoft Edge）现在都支持@media规则嵌套。如CSS条件3中所述。问题中带有嵌套@media规则的代码现在应该可以在任何地方正常工作，但Internet Explorer除外（html" target="_blank">Internet Explorer 不再使用新功能进行更新，这意味着IE版本不会支持此功能）。

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

接下来是在考虑到这些历史限制的情况下对原始问题进行的分析。

有一些术语上的混乱需要澄清，以使我们了解正在发生的事情。

您拥有的代码是指@media规则，而不是媒体查询—媒体查询本身是@media令牌后面的组件，而规则是由@media，媒体查询和嵌套在其集合内的规则组成的整个代码块大括号。

在CSS中使用媒体查询时，以及在特定情况下，@media即使@import伴随着另一个媒体查询，导入的样式表中的规则也可以正常工作时，这可能会引起很多混乱。注意，在@media和@import规则中都可能发生媒体查询。它们是同一回事，但是它们被用来以不同方式限制性地应用样式规则。

现在，这里的实际问题是，嵌套@media规则在CSS2.1中无效，因为不允许在规则内嵌套任何@media规则。但是，CSS3中的情况似乎大不相同。即，“条件规则”模块非常清楚地说明了@media规则可以嵌套，甚至提供了一个示例：

例如，使用这套嵌套规则：

 @media print { // rule (1)
   #navigation { display: none }
   @media (max-width: 12cm) { // rule (2)
     .note { float: none }
   }
 }

当显示区域的宽度（对于打印介质是页面框）的宽度小于或等于时，标记为（1）的规则的条件对于打印介质为true，标记为（2）的规则的条件为true。12厘米因此，只要将此样式表应用于打印介质，规则“ #navigation
{display：none}”就适用；仅当样式表应用于打印介质和宽度时，规则“.note{float：none}”才适用页面框的小于或等于12厘米。

此外，似乎Firefox正在遵循此规范并相应地处理规则，而其他浏览器仍在以CSS2.1的方式对其进行处理。

不过，“ 语法”模块中的语法尚未更新以反映这一点。@media与CSS2.1一样，它仍然不允许规则嵌套在规则中。无论如何，该规范都打算进行重写，所以我想这没关系。

基本上，CSS3允许它（等待重写Syntax模块），但是CSS2.1不允许（因为它既没有定义媒体查询，也没有嵌套的@media规则块）。而且，尽管至少有一种浏览器已开始支持新规范，但我不会将其他浏览器称为越野车。相反，我要说的是它们只是还没有赶上来，因为它们确实符合较旧的，更稳定的规格。

最后，您之所以@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;
    }
}

在CSS中嵌套@media规则

Index.html

importer.css

media.css

相关阅读

相关文章

相关问答

相关工具

相关文档