63

不同浏览器的支持似乎不同..

检查链接

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

​</p>

有趣的是，在条件中嵌套媒体查询@import似乎确实有效。

例如：

索引.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>

进口商.css

@import url(media.css) screen and (min-width: 480px);

媒体.css

body {
    background-color: #6aa6cc;
    color: #000;
}

@media screen and (min-width:768px) {
    body {
        background-color: #000;
        color: #fff;
    }
}
4

1 回答 1

101

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

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

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

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

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

当涉及到在 CSS 中使用媒体查询时，这可能会导致许多人感到困惑，以及在您的特定情况下，@media导入样式表中的规则即使@import伴随着另一个媒体查询也能正常工作。请注意，媒体查询可以同时出现在@media和@import规则中。它们是相同的东西，但它们被用来以不同的方式限制性地应用样式规则。

现在，这里的实际问题是嵌套@media规则在 CSS2.1 中无效，因为您不允许在规则中嵌套任何at@media规则。然而，CSS3 中的情况似乎完全不同。也就是说，条件规则模块非常清楚地表明@media规则可以嵌套，甚至提供了一个示例：

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

@media print { /* rule (1) */
  /* hide navigation controls when printing */
  #navigation { display: none }
  @media (max-width: 12cm) { /* rule (2) */
    /* keep notes in flow when printing to narrow pages */
    .note { float: none }
  }
}

标记 (1) 规则的条件对于打印介质为真，当显示区域的宽度（对于打印介质为页框）小于或等于时，标记为 (2) 的规则条件为真12厘米。因此，规则“#navigation { display: none }”适用于此样式表应用于打印媒体时，规则“.note { float: none }”仅适用于样式表应用于打印媒体和宽度页框的长度小于或等于 12 厘米。

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

不过，语法模块中的语法尚未更新以反映这一点；它仍然不允许在规则中嵌套@media规则，就像 CSS2.1 一样。无论如何，该规范都将被重写，所以我想这并不重要。

基本上，CSS3 允许它（等待重写语法模块），但不是 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;
    }
}
于 2012-07-31T19:04:06.523 回答