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

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

Ответ 1

Это с помощью CSS-каскадной таблицы стилей.

Это означает, что если вы применяете два правила, которые сталкиваются с одними и теми же элементами, он выберет последний, который был объявлен, если первый не имеет маркер !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 пикселей).

Ответ 2

Или вы можете просто добавить минимальную ширину к более крупным медиа-запросам и не иметь никаких проблем, независимо от порядка.

@media (min-width: 400.1px) and (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}