最近，我一直在设计更灵敏的网站，我经常使用CSS媒体查询。我注意到的一种模式是媒体查询的定义顺序实际上很重要。我没有在每个浏览器中测试它，只是在Chrome上。这个行为有解释吗？有时，当您的网站无法正常工作时您会感到沮丧，您不确定是查询还是查询的书写顺序。

这里有一个例子：

HTML

Welcome to my website

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 */