在CSS中嵌套@media规则

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

检查链接]

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除外(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规则 的全部内容, 来源链接: utcz.com/qa/431400.html

回到顶部