CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了为什么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;}
}

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

解决方法

这是由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像素宽的窗口)。

大佬总结

以上是大佬教程为你收集整理的为什么CSS中的媒体查询顺序很重要?全部内容,希望文章能够帮你解决为什么CSS中的媒体查询顺序很重要?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。