Media Queries определяют область действия правил стилей. Сегодня я предлагаю вам рассмотреть логику применения Media Queries - неотъемлемой часть спецификации CSS3. Применение данных правил упрощает верстку страниц, в особенности где используются адаптивный дизайн, выводимые циклом элементы и другое.

If (Если)

Логический элемент If можно использовать для определения версии браузера.

<!--[if IE 8]><link href="/ie8.css" rel="stylesheet" media="all" /><![endif]-->

And (И)

Объединение условий.

@media (min-width: 600px) and (max-width: 800px) { html { background: red; } }

Or (Или)

Перечисление

@media (max-width: 600px), (min-width: 800px) { html { background: red; } }

Технически, запятая относится к перечислению, но по факту работает как элемент "или".Not (Не)

Обратная логика с элементом Not.

@media not all and (max-width: 600px) { html { background: red; } }

Данное выражение работает так, not x and y = not (x and y) ≠ (not x) and y. Т.е. оно не работает индивидуально для части с указанием max-width, хотя и часть написана через and. Вот если бы была запятая, тогда да.

Эксклюзивный

Когда необходимы эксклюзивные правила.

@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; } }

Логически это работает как переключатель состояний, но при этом имея значение по-умолчанию.

Переопределение

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

@media (min-width: 400px) { html { background: red; } }
@media (min-width: 600px) { html { background: green; } }
@media (min-width: 800px) { html { background: blue; } }

Такая схема будет работать, потому что условия отсортированы правильно. Если изменить порядок то в окне браузера шириной более 800px будет красный фон.

Сначала для мобильных

Прописываете сначала стили для маленьких экранов, а потом переопределяете для больших. Тут главное свойство min-width.

html { background: red; }
@media (min-width: 600px) { html { background: green; } }

Сначала для настольных компьютеров

Прописываете сначала стили для больших экранов, а потом переопределяете для маленьких. Тут главное свойство max-width.

html { background: red; }
@media (max-width: 600px) { html { background: green; } }

Необычные

Вы можете все усложнить насколько хотите.

@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, оно было использовано для предотвращения использования стиля для браузеров не поддерживающих Media Queries.

Оригинал статьи.