在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