Как сообщить браузеру, какие медиа-запросы использовать?

Question

Скажем, например, у меня есть:

@media(max-width:800px) {
    /* Some Code */
}
@media(max-width:500px) {
    /* Some Code */
}

Браузер случайным образом выбирает один из них. Если я просматриваю на 800 пикселей, он может выбрать 800 пикселей css или может выбрать код 500 пикселей. Если я смотрю на 500 пикселей, он может выбрать 800 пикселей css или код 500 пикселей. Я заметил, что он чаще использует 800 пикселей, даже если у меня размер экрана 500 пикселей или меньше. А иногда он сочетает в себе 2. Вот скриншот кода, который принимает браузер ...

Обратите внимание, как он набирает обе ширины, но затем max-width:500px вычеркнуто? У меня разрешение экрана было установлено на 500 пикселей. Буду признателен за помощь. Спасибо.

Answer 1

Очевидно (что становится ясно из вашего скриншота) порядок медиа-запросов в вашем коде не такой, как вы его разместили, а такой:

@media(max-width:500px) { /* rule for nav-item starts at line 26 */
    /* Some Code */
}
@media(max-width:800px) { /* rule for nav-item starts at line 38 */
    /* Some Code */
}

И это неправильный порядок, так как Запрос 800px всегда будет применяться ко всему, что до этого было применено к запросу 500px и перезаписать его. (Порядок важен).

Так что просто поменяйте их порядок местами - сначала 800 пикселей, затем 500 пикселей - и все будет готово.

Answer 2

Всегда будет применяться селектор с наивысшей специфичностью . Любое неожиданное поведение будет связано с чем-то, влияющим на специфичность.

Так что это определенно не случайно, хотя вам может показаться так по какой-то причине.

С селекторами с таким же приоритетом, как в вашем примере, будет применяться последний найденный. Обратите внимание на то, что у него самый большой номер строки из всех найденных правил. Медиа-запрос влияет только на то, когда он будет применяться, и не влияет на его специфичность.

Возможно, порядок вашего CSS изменяется без вашего ведома (возможно, препроцессор ведет себя неожиданно?), Или вы, возможно, сами меняете порядок, не осознавая, что это влияет на специфичность. Также обратите внимание, что правила могут исходить из нескольких наборов правил, возможно, это вас тоже смущает? Если то, о чем я говорил, похоже, не вызывает доверия, определенно прочтите, как работает каскадирование .

Что касается вашего примера, не совсем понятно, чего вы пытаетесь достичь и какова реальная проблема, но совершенно точно, что оба медиа-запроса будут совпадать при ширине 500 пикселей. Похоже, вы этого не хотите, поэтому просто измените свои медиа-запросы:

@media (min-width: 501px) and (max-width:800px) {
    /* Some Code */
}
@media (max-width:500px) {
    /* Some Code */
}