Чому порядок медіа-запитів має значення в CSS?

Question 1

Останнім часом я розробляв сайти, які є більш чуйними, і я часто використовував медіа-запити 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;}
}

Якщо я розумію медіа-запити правильно, порядок не повинен мати значення, але, схоже, це має значення. Що може бути причиною?

Question 2

Це за проектом CSS - каскадного таблиці стилів.

Це означає, що якщо ви застосуєте два правила, що стикаються до одних і тих самих елементів, він вибере останнє, яке було оголошено, якщо перше не має !importantмаркера або не є більш конкретним (наприклад, html > bodyпроти справедливого 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 пікселів у ширину).

Question 3

Або ви можете просто додати мінімальну ширину до більших запитів / ів медіа і не мати проблем, незалежно від замовлення.

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

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

Розгорніть фрагмент

Використовуючи цей код, у довільному порядку колір тла завжди буде червоним для роздільних здатностей шириною 400,1px-600px і завжди буде синім для роздільних здатностей шириною 400px або менше.