От автора: Просто на случай, если и у вас по этому поводу постоянно бывают путаница, как у меня.
If
Медиазапросы – это не более чем операторы If. Если условие верно по отношению к браузеру, используются внутренние инструкции CSS.
And
Используется ключевое слово and.
|
1 2 3 |
@media (min-width: 600px) and (max-width: 800px) { html { background: red; } } |
Or
Альтернативы обособляются запятой.
|
1 2 3 |
@media (max-width: 600px), (min-width: 800px) { html { background: red; } } |
Технически к нему обращаются для разделения медиазапросов, но эффективно и or.
Not
Инверсия условия с помощью ключевого слова not.
|
1 2 3 |
@media not all and (max-width: 600px) { html { background: red; } } |
Насколько я знаю, если просто сделать not (max-width: 600px), то это не сработает, отсюда вытекает вышеприведенный слегка грубоватый синтаксис. Возможно, кто-то сможет мне это объяснить. Обратите внимание, что not имеет меньший приоритет, чем запятая, так что если вы отделяете запросы запятой, то инверсия будет действовать только на внутренний запрос. Также заметьте, что not обращает вспять логику всего медиазапроса в общем, а не отдельных его частей. not x and y = not (x and y) ≠ (not x) and y
Эксклюзивность
Чтобы гарантировать единовременное действие только одного медиазапроса, подберите числа (или другие параметры) так, чтобы это стало возможным. Может быть, это будет легче, если организовать запросы вот таким образом.
|
1 2 3 4 5 6 7 8 9 |
@media (max-width: 400px) { html { background: red; } } @media (min-width: 401px) and (max-width: 800px) { html { background: green; } } @media (min-width: 801px) { html { background: blue; } } |
Логически это немного похоже на оператор switch, только без «если ничего не подойдет, сделать так», как в установке по умолчанию.
Переопределение
Нет гарантий от того, что при выполнении не сработают сразу несколько медиазапросов одновременно. Поэтому в некоторых случаях более эффективно использовать переопределение, а не делать все условия эксклюзивными, так как медиазапросы обрабатываются последовательно, сохраняя исходный порядок селекторов.
|
1 2 3 4 5 6 7 8 9 |
@media (min-width: 400px) { html { background: red; } } @media (min-width: 600px) { html { background: green; } } @media (min-width: 800px) { html { background: blue; } } |
Вышеприведенный код станет работать, так как запросы расположены правильно. Измените этот порядок, и при ширине окна браузера свыше 800px фон станет красным, что возможно покажется неочевидным.
Стратегия ”Mobile First”
Стили для маленьких экранов помещаются в вашем обычном CSS, а затем, по мере увеличения экрана вы переопределяете то, что нужно. Для этого используем медиазапрос min-width.
|
1 2 3 4 5 |
html { background: red; } @media (min-width: 600px) { html { background: green; } } |
Стратегия ”Desktop First”
Стили для больших экранов помещаются в вашем обычном CSS, а затем, по мере уменьшения экрана вы переопределяете то, что нужно. Для этого используем медиазапрос max-width.
|
1 2 3 4 5 |
html { background: red; } @media (max-width: 600px) { html { background: green; } } |
Становимся эксцентричными
Здесь вы можете усложнить все, насколько захотите.
|
1 2 3 4 5 6 7 8 9 10 |
@media only screen and (min-width: 100px), not all and (min-width: 100px), not print and (min-height: 100px), (color), (min-height: 100px) and (max-height: 1000px), handheld and (orientation: landscape) { html { background: red; } } |
Обратите внимание, что ключевое слово only понадобилось для того, чтобы предотвратить загрузку таблицы стилей и применение стилей неподдерживающими медиазапросы браузерами. Не уверен, насколько это сейчас или когда-либо раньше требовалось на самом деле.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
