Вопросы Теги

Почему порядок медиа-запросов имеет значение в 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;}
}

Однако, если бы я написал запрос для 1024x600 в последнем, браузер проигнорировал бы его и применил бы значение поля, указанное в начале CSS ( 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;}
}

Если я правильно понимаю медиа-запросы, порядок не должен иметь значения, но похоже, что это имеет значение. В чем может быть причина?

68
задан simanacci 4 February 2016 в 17:33
поделиться