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

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

Источник

5 ответов

Решение

Это дизайн 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 пикселей).

Источник

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

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

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

При использовании этого кода в любом порядке фоновый цвет всегда будет красным для разрешений с шириной 400.1px-600px и всегда будет синим для разрешений с шириной 400px или меньше.

Источник

Поощряйте вас следовать принципу мобильного дизайна. Это означает, что ваши базовые стили — это стили для мобильных устройств (телефоны расположены вертикально), тогда напишитемедиа-запросы, где это необходимо, в следующих точках останова и в следующем порядке:

  • базовые стили — телефоны расположены вертикально
  • min-width: 500px — переопределение для телефонов, удерживаемых горизонтально.
  • min-width: 750px — переопределения для iPad, удерживаемых вертикально.
  • min-width: 1000px — переопределение для iPad, удерживаемых горизонтально.
  • минимальная ширина: 1250 пикселей — переопределения для ноутбуков и настольных компьютеров.
Источник

Теперь, когда вы постепенно будете уменьшать размер экрана, то есть, если размер экрана составляет 601 пиксель (что больше 600 пикселей, но меньше 900 пикселей), тогда цвет фона в этом случае будет «красным». Аналогично, если размер экрана составляет 599 пикселей (что меньше, чем 600 пикселей и 900 пикселей), то будет применяться более поздний, т.е. фон становится «синим». Таким образом, он проверяет каждое условие по мере постепенного уменьшения размера экрана сверху вниз.

Источник

Может я тупой, но почему бы и нет:

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

@media (min-width: 400px) and (max-width: 600px) {
  body {
    background: red;
  }
}
Источник
Другие вопросы по тегам