最近,我一直在设计响应更快的网站,而且我经常使用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;} …