Какие правила для css media query перекрываются?

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

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

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

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

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

что произойдет, во всех поддерживаемых браузерах, ровно в 20em и 45em?

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


Мне очень любопытен ответ здесь учитывая спецификацию.

3 64
css css3 media-queries responsive-design

3 ответа:

каковы правила для css media query overlap?

Каскад.

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

что произойдет, во всех поддерживаемых браузерах, ровно в 20em и 45em?

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

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

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

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

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

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

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

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

имейте в виду, однако, что если у вас есть объявления, что не перекрытие в обоих @media правила, то все эти правила будут применяться. Что происходит здесь-это Союз деклараций в @media правила, а не только последнее полностью отменяет первое... что приводит нас к вашему предыдущему вопросу:

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

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

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

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

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

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

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

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

84

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

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

информация:

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

2

Я пробовал как рекомендовано здесь: 

@media screen and (max-width: calc(48em - 1px)) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

но обнаружил, что это не было хорошей идеей, потому что он не работает на Chrome прямо сейчас либо на моем рабочем столе Ubuntu, либо на моем телефоне Android. (как объяснено здесь:calc () не работает в медиа-запросах) но, я нашел лучший способ...

@media screen and (max-width: 47.9999em) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

и бац!

0