为什么CSS中的媒体查询顺序很重要?

前端之家收集整理的这篇文章主要介绍了为什么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;}
}

但是,如果我最后写入1024×600的查询,浏览器将忽略它,并应用CSS开头指定的margin值(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;}
}

如果我对媒体查询的理解是正确的,顺序应该不重要,但它似乎它。可能是什么原因?

@H_301_18@

解决方法

这是由CSS – 级联样式表的设计。

这意味着,如果你应用两个碰撞相同元素的规则,它将选择最后一个被声明的规则,除非第一个规则具有!important标记或更具体(例如html> body vs 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像素宽的窗口)。

@H_301_18@ @H_301_18@

猜你在找的CSS相关文章