Jam*_*uth 61 css css3 media-queries
各种浏览器的支持似乎有所不同.
检查链接
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似乎有效.
例如:
<!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>
@import url(media.css) screen and (min-width: 480px);
body {
background-color: #6aa6cc;
color: #000;
}
@media screen and (min-width:768px) {
body {
background-color: #000;
color: #fff;
}
}
Bol*_*ock 95
对于那些只是寻找"哪些浏览器支持嵌套@media规则？"的答案,简短的回答是所有现代浏览器,包括Firefox,Safari,Chrome(及其衍生产品)和Microsoft Edge,现在都支持嵌入@media规则如CSS条件3中所述.具有嵌套@mediaat规则的问题中的代码现在应该可以在任何地方正常工作,但Internet Explorer除外(不再使用新功能进行更新,这意味着IE的任何版本都不支持此功能).
CSS2.1中不存在此功能,因为当时只能使用逗号分组时存在媒体类型,这解释了为什么在首次提出此问题时对此的支持非常差.
以下是对原始问题的分析,并考虑到这些历史局限性.
有一些术语混淆需要清理,以便我们了解到底发生了什么.
您拥有的代码是指@media规则,而不是媒体查询 - 媒体查询本身就是跟随@media令牌的组件,而规则是整个代码块,包括@media媒体查询和嵌套在其集合中的规则花括号.
在CSS中使用媒体查询时,这可能会引起许多人的混淆,以及@media导入样式表中的规则即使@import伴随另一个媒体查询也能正常工作的特定情况.请注意,媒体查询可以在两者@media和@import规则中发生.它们是相同的,但它们习惯于以不同的方式限制性地应用样式规则.
现在,这里的实际问题是嵌套@media规则在CSS2.1中无效,因为您不允许在规则中嵌套任何 at- @mediarules.但是,CSS3中的情况似乎有所不同.也就是说,条件规则模块非常清楚地说明@media规则可以嵌套,甚至提供一个例子:
例如,使用这组嵌套规则:
Run Code Online (Sandbox Code Playgroud)@media print { // rule (1) #navigation { display: none } @media (max-width: 12cm) { // rule (2) .note { float: none } } }标记为(1)的规则的条件对于打印介质是正确的,并且当显示区域(对于打印介质是页框)的宽度小于或等于时,标记为(2)的规则的条件为真. 12厘米.因此,只要将此样式表应用于打印介质,就会应用规则"#navigation {display:none}",并且仅当样式表应用于打印介质和宽度时才应用规则".note {float:none}"页面框的小于或等于12厘米.
此外,看起来Firefox遵循此规范并相应地处理规则,而其他浏览器仍然以CSS2.1方式处理它.
但是,语法模块中的语法尚未更新以反映这一点; @media与CSS2.1一样,它仍然不允许在规则中嵌套规则.无论如何,这个规范都是为了重写,所以我想这没关系.
基本上,CSS3允许它(等待重写语法模块),但不允许CSS2.1(因为它既不定义媒体查询也不允许嵌套@media规则块).虽然至少有一个浏览器已经开始支持新规范,但我不会将其他浏览器称为bug; 相反,我会说他们还没有赶上,因为他们真的符合更古老,更稳定的规范.
最后,您的@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;
}
}