Ответ 1
Каковы правила перекрытия запросов на медиаплеер CSS?
Cascade.
@media правила прозрачны для каскада, поэтому, когда два или более правила @media совпадают в одно и то же время, браузер должен применять стили во всех соответствующих правилах и соответственно разрешать каскад. 1
Что произойдет, во всех поддерживающих браузерах, ровно 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 (что, по-видимому, соответствует первому).
1 Хотя ни одно из этого явно не указано ни в модуле условных правил, ни в Каскадный модуль (последний из которых в настоящее время намечен для перезаписи), предполагается, что каскад будет проходить нормально, поскольку спецификация просто говорит о применении стилей в любые и все @media правила, соответствующие браузеру или носителю.