为什么媒体查询的顺序在CSS中很重要？最近，我一直在设计响应更快的网站，而且我经常使用CSS媒体查询。我注意到的一种模式是定义媒体查询的顺序实际上很重要。我没有在每个浏览器中测试它，只是在Chrome上测试。这种行为有解释吗？有时，当您的网站无法正常工作时会感到沮丧，并且您不确定它是查询还是查询的编写顺序。这是一个例子：HTML<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two"><a href="#">Contact us</a></div></body>CSS：body{font-size:1em; /* 16px */}.two{margin-top:2em;}/* Media Queries */@media (max-width: 480px) {
.body{font-size: 0.938em;}}/* iphone */@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}}/*if greater than 1280x800*/@media (min-width: 1200px) {
.two{margin-top:8em;}
}/*1024x600*/@media (max-height: 600px) {
.two{margin-top:4em;}}/*1920x1024*/@media (min-height: 1020px) {
.two{margin-top:9em;}}/*1366x768*/@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}}但是，如果我在最后编写1024x600的查询，浏览器将忽略它并应用CSS开头指定的边距值（margin-top：2em）。/* Media Queries - Re-arranged version */@media (max-width: 480px) {
.body{font-size: 0.938em;}}/* iphone */@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}}/*if greater than 1280x800*/@media (min-width: 1200px) {
.two{margin-top:8em;}}/*1920x1024*/@media (min-height: 1020px) {
.two{margin-top:9em;}}/*1366x768*/@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}}
/*1024x600*/@media (max-height: 600px) {
.two{margin-top:4em;}}如果我对媒体查询的理解是正确的，那么顺序应该无关紧要，但似乎确实如此。可能是什么原因？
2 回答
慕村225694
TA贡献1880条经验 获得超4个赞
那就是CSS的设计 - 层叠样式表。
这意味着，如果你应用两个碰撞到相同元素的规则，它将选择最后一个被声明的规则，除非第一个具有!important标记或更具体（例如html > bodyvs just body，后者不太具体）。
所以，鉴于这个CSS
@media (max-width: 600px) {
body {
background: red;
}}@media (max-width: 400px) {
body {
background: blue;
}}如果浏览器窗口宽度为350像素，则背景将为蓝色，而使用此CSS
@media (max-width: 400px) {
body {
background: blue;
}}@media (max-width: 600px) {
body {
background: red;
}}和窗口宽度相同，背景为红色。两个规则确实匹配，但第二个规则是应用的规则，因为它是最后一条规则。
最后，用
@media (max-width: 400px) {
body {
background: blue !important;
}}@media (max-width: 600px) {
body {
background: red;
}}要么
@media (max-width: 400px) {
html > body {
background: blue;
}}@media (max-width: 600px) {
body {
background: red;
}}背景将为蓝色（具有350像素宽的窗口）。
杨魅力
TA贡献1811条经验 获得超6个赞
或者您可以将min-width添加到更大的媒体查询中，并且不管顺序如何都没有任何问题。
@media (min-width: 400.1px) and (max-width: 600px) {
body {
background: red;
}}@media (max-width: 400px) {
body {
background: blue;
}}使用此代码，无论如何，对于宽度为400.1px-600px的分辨率，背景颜色将始终为红色，对于宽度为400px或更小的分辨率，背景颜色将始终为蓝色。
- 2 回答
- 0 关注
- 878 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消