Каковы правила совпадения запросов медиа-запросов CSS?

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

Например, если мы рассмотрим код:

@media (max-width: 20em) {
    /* for narrow viewport */
}

@media (min-width: 20em) and (max-width: 45em) {
    /* slightly wider viewport */
}

@media (min-width: 45em) {
    /* everything else */
}

Что произойдет, во всех поддерживающих браузерах, ровно 20 и 45??

Я видел, как люди используют: такие вещи, как 799px, а затем 800px, но как насчет ширины экрана 799,5 px? (Очевидно, не на обычном дисплее, а на сетчатке?)

Мне больше всего интересен ответ, рассматривающий спецификацию.

Ответ 1

Каковы правила перекрытия запросов на медиаплеер CSS?

Cascade.

@media правила прозрачны для каскада, поэтому, когда два или более правила @media совпадают в одно и то же время, браузер должен применять стили во всех соответствующих правилах и соответственно разрешать каскад. ¹

Что произойдет, во всех поддерживающих браузерах, ровно 20 и 45??

В точности ровно 20 м, ваш первый и второй медиа-запросы будут совпадать. Браузеры будут применять стили как в правилах @media, так и в каскаде соответственно, поэтому, если есть какие-то противоречивые правила, которые необходимо переопределить, побеждает последний объявленный (с учетом конкретных селекторов, !important и т.д.). Аналогично для второго и третьего медиа-запросов, когда область просмотра имеет ширину 45 м.

Учитывая ваш пример кода, добавлены некоторые правила стиля:

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

Когда окно просмотра обозревателя имеет ширину всего 20 м, оба этих медиа-запроса вернут true. По каскаду переопределения display: block display: none и float: left будут применяться к любому элементу с классом .sidebar.

Вы можете думать об этом как о применении правил, как если бы медиа-запросы не начинались с:

.sidebar { display: none; }
.sidebar { display: block; float: left; }

Другой пример того, как каскад имеет место, когда браузер соответствует двум или более медиа-запросам, можно найти в этом другом ответе.

Будем предупреждать, однако, что если у вас есть объявления, которые не перекрываются в обоих правилах @media, тогда применяются все эти правила. Здесь происходит union объявлений в обоих правилах @media, а не только последнее, полностью перекрывающее первое... что приводит нас к вашему предыдущему вопросу:

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

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

Помните, что префиксы min- и max- означают "минимум включительно" и "максимум включительно"; это означает, что (min-width: 20em) и (max-width: 20em) будут совпадать с окном просмотра шириной всего 20 м.

Похоже, у вас уже есть пример, который возвращает нас к вашему последнему вопросу:

Я видел, как люди используют: такие вещи, как 799px, а затем 800px, но как насчет ширины экрана 799,5 px? (Очевидно, не на обычном дисплее, а на сетчатке?)

Это я не совсем уверен; все значения пикселей в CSS являются логическими пикселями, и мне было трудно найти браузер, который будет сообщать о дробном значении пикселя для ширины окна просмотра. Я пробовал экспериментировать с некоторыми фреймами, но ничего не смог придумать.

Из моих экспериментов казалось бы, что Safari на iOS округляет все значения дробного пикселя, чтобы гарантировать, что любой из max-width: 799px и min-width: 800px будет соответствовать, даже если видовое окно действительно 799.5px (что, по-видимому, соответствует первому).

¹_{Хотя ни одно из этого явно не указано ни в модуле условных правил, ни в Каскадный модуль (последний из которых в настоящее время намечен для перезаписи), предполагается, что каскад будет проходить нормально, поскольку спецификация просто говорит о применении стилей в любые и все @media правила, соответствующие браузеру или носителю.}

Ответ 2

calc() может использоваться для работы вокруг этого (min-width: 50em and max-width: calc(50em - 1px) будет правильно сложена), но плохая поддержка браузера, и я бы не рекомендовал ее.

@media (min-width: 20em) and (max-width: calc(45em - 1px)) {
    /* slightly wider viewport */
}

Информация:

Некоторые другие, упомянутые, не используя блок em, помогут в укладке ваших запросов.