大佬教程收集整理的这篇文章主要介绍了为什么CSS中的媒体查询顺序很重要?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这里有一个例子:
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;} }
如果我对媒体查询的理解是正确的,顺序应该不重要,但它似乎它。可能是什么原因?
这意味着,如果你应用两个碰撞相同元素的规则,它将选择最后一个被声明的规则,除非第一个规则具有!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,请注明来意。