大佬教程收集整理的这篇文章主要介绍了在CSS中嵌套@media规则，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
检查link
Firefox：黑色，白色文字。
歌剧，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;
}
}
Firefox是第一个支持嵌套@media规则的，但是自从这个答案第一次发布以来，其他浏览器已经慢慢赶上了。也就是说，Chrome(以及类似的，Blink Opera)已经更新以支持它。
据我所知，Safari和IE仍然不支持它。
有一些术语混乱，需要清理，以便我们了解到底发生了什么。
你所提到的代码是指@media规则，而不是这么多的媒体查询 – 媒体查询本身是跟在@media令牌之后的组件，而规则是整个代码块，包括@media，媒体查询和规则嵌套在其大括号的集合内。
当在CSS中使用媒体查询时，这可能导致许多人之间的混乱，以及在导入的样式表中的@media规则可以正确工作的特定情况下，即使@import伴随着另一个媒体查询。请注意，媒体查询可以在@media和@import规则中发生。他们是同样的事情，但他们被用来限制性地以不同的方式应用样式规则。
现在，这里的实际问题是嵌套的@media规则是not valid in CSS2.1，因为你不允许在@media规则中嵌套任何规则。但是，CSS3中的东西看起来很不同。也就是说，条件规则模块states very clearly @media规则可以嵌套，甚至提供一个例子：
此外，看起来Firefox正在遵循此规范并相应地处理规则，而其他浏览器仍然处理它CSS2.1方式。
Syntax module的语法没有更新，以反映这一点，虽然;它仍然不允许@media规则内的规则嵌套与CSS2.1一样。这个规范预定为重写反正，所以我想这不要紧。
基本上，CSS3允许它(等待重写语法模块)，但不是CSS2.1(因为它既不定义媒体查询也不允许嵌套的@media规则块)。而且至少有一个浏览器开始支持新规范，我不会调用其他浏览器的bug;相反，我会说，他们根本没有赶上，因为他们真的符合一个更老的，更稳定的规格。
最后，你的@import工作的原因是因为@import能够在媒体查询的帮助下有条件地工作。但是，这与导入的样式表中的@media规则没有关系。这些事实上是两个单独的事情，并被所有浏览器视为这样。
为了使您的代码在不同浏览器中保持一致，您可以使用@import语句，或者，由于两个规则都使用最小宽度，因此只需删除@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规则全部内容，希望文章能够帮你解决在CSS中嵌套@media规则所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。