Медиа запросы в адаптивной верстке

Продолжая осваивать адаптивную верстку, как элемент адаптивного дизайна, решил написать про медиа-запросы или медиазапросы, в оригинале media-queries. Как мы помним из теоретических основ адаптивной верстки и адаптивного дизайна, медиа-запросы это одна из основных концепций данной технологии и без ее глубокого понимания освоить адаптивную верстку просто не получится.

История медиа-запросов началась еще с далекого 2002 года, с правила @media, которое появилось в спецификации CSS2. Тогда это была относительно простая технология, которая позволяла выводить различные стили в зависимости от типа устройства. Со временем технология развивалась, стала более совершенное в CSS2.1, но оценить полную мощь данной технологии веб-разработчики смогли только после выхода спецификации CSS3.

Quote: Медиа-запросы (media-queries) – технология, реализуемая на стороне браузера, позволяющая загружать разные стили в зависимости от типа и характеристик устройства, и позволяющая тем самым влиять на процесс отображения информации.

В CSS3 спецификации в обработке правила @media появилось полноценная работа с размерами устройства и экрана устройства. Именно благодаря этой поддержке появилась возможность делать адаптивные сайты. Рассмотрим медиа-запросы более внимательно.

Структура медиа-запроса

Сначала предлагаю разобрать структуру медиа-запроса:

@media [not|only] type [logical] (expression) {
	CSS код
}

@media – объявление правила
not – оператор отрицания, используется для отрицании всего последующего выражения
only – оператор позволяет скрыть медиа-запросы от браузеров, которые их не поддерживают
type – тип устройства
logical – логический оператор (и или или) позволяет лучше управлять логикой медиа-запроса
expression – выражение проверяющее характеристики устройства

Отмечу, что я не планирую писать исчерпывающее руководство по media-queries, поэтому остановлюсь на тех моментах, которые позволяют делать адаптивные сайты.

Тип устройства

Параметр type обозначает тип устройства. Он может принимать следующие значения:

All - позволяет применить стили ко всем типам устройств. Print - позволяет применить стили в к устройствам печати, а так же к экрану в разделе предварительный просмотр печати. screen - позволяет применить стили в к устройствам с экраном. Как правило, это компьютеры, планшеты, наладонники, смартфоны. speech - позволяет применить стили в к устройствам синтезаторам речи.

Есть и другие типы, но скорее всего из нового стандарта их уберут. А нам вполне достаточно тех типов, которые мы перечислили.

Оператор only

Важный оператор, который позволяет отсекать старые браузеры. Так как старые браузеры не понимают синтаксис media-queries, то часть стилей, идущая за основным правилом, может быть ими прочитана. Чтобы избежать этого мы используем оператор only, который, прочитанный старым браузером, заставит его проигнорировать все объявление стилей.

Операторы not, or, and

Стандартные операторы. NOT инвертирует логическое значение следующего за ним выражения. OR это стандартное логическое ИЛИ. AND это стандартное логическое И.

Медиа-функции

Медиа-функции набор операторов, позволяющих проверять те или иные технические характеристики и и свойства устройств. Это самая media-queries, элемент позволяющий производить тонкую настройку запроса. Медиа-функции способны проверять следующие параметры:

Ширина (min-width, max-width) – позволяет применить стили в зависимости от ширины видимой части.
Высоты (min-height, max-height) – позволяет применить стили в зависимости от высоты видимой части.
Ширина устройства (min-device-width, max-device-width) – позволяет применить стили в зависимости от ширины устройства.
Высота устройства (min-device-height, max-device-height) – позволяет применить стили в зависимости от высоты устройтва.
Разрешение (min-resolution, max-resolution) – позволяет применить стили в зависимости от разрешения.
Ориентация (orientation) – позволяет применить стили в зависимости от ориентации устройства.
Соотношение ширины и высоты (min-aspect-ratio, max-aspect-ratio) – позволяет применить стили в зависимости от соотношения сторон видимой части.
Соотношение ширины и высоты устройства (min-device-aspect-ratio, max-device-aspect-ratio) – позволяет применить стили в зависимости от соотношения сторон устройства.
Цветность (min-color, max-color) – позволяет применить стили в зависимости от соотношения сторон устройства.
Количество поддерживаемых цветов (min-color-index, max-color-index) – позволяет применить стили в зависимости от количества поддерживаемых цветов.
Монохромность (min-monochrome, max-monochrome) – позволяет применить стили в зависимости от монохромности и количества оттенков серого.
Сетка (grid) – позволяет применить стили в зависимости от поддержки устройством фиксированной сетки.

Отдельно следует остановиться на порядке медиа-запросов.