В последнее время я разрабатывал более отзывчивые сайты и часто использовал медиа-запросы 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;}
}
Если я правильно понимаю медиа-запросы, порядок не имеет значения, но похоже, что это так. Что может быть причиной?
Или вы можете просто добавить минимальную ширину к большим медиа-запросам и не иметь никаких проблем, независимо от порядка.
@media (min-width: 400.1px) and (max-width: 600px) { body { background: red; } } @media (max-width: 400px) { body { background: blue; } }
При использовании этого кода в любом порядке цвет фона всегда будет красным для разрешений с шириной 400,1–600 пикселей и всегда будет синим для разрешений с шириной 400 пикселей или меньше.
источник