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

Основные понятия

Адаптивный дизайн - дизайн, который подстраивается под размеры и особенности устройства пользователя. Фактически, создается 3 варианта дизайна для компьютеров, планшетов и смартфонов, и все они сливаются воедино. С помощью @media-запросов выводятся стили, соответствующие типу устройства.
@media-запросы позволяют применить определенные стили к определенному типу устройства и его характеристикам, например, к смартфону или устройству с шириной экрана 480px. Типы носителей вы можете увидеть в таблице ниже:

Типы носителей и их описание

Тип	Описание
All	Все типы. Используется по умолчанию.
Aural Speech	Речевые браузеры и устройства для воспроизведения текста вслух.
Braille	Устройства системы Брайля для слепых людей.
Embossed	Принтеры на основе системы Брайля.
Handheld	Смартфоны и другие мобильные устройства.
Print	Печатающие устройства.
Projection	Проекторы.
Screen	Экраны мониторов.
Tty	Терминалы и устройства с фиксированными размерами символов.
Tv	Телевизоры.

Синтаксис

Создадим простейший @media-запрос. В данном случае, стили будут применяться для смартфонов. Теперь усложним задачу. Сделаем запрос для смартфонов с минимальной шириной 320px и для всех устройств, кроме смартфонов. В этом нам помогут операторы and и not. Запятая по обыкновению в CSS означает "или то, или это". Рассмотрим и этот пример:

@media-функции

@media-функции - функции, задающие тех. характеристики устройства. Почти все функции содержат приставки min и max, соответственно означающие минимальные и максимальные значения. Список @media-функций вы можете просмотреть ниже.

@media-функции и их описание

Функция	Min/max	Носители	Значения	Описание
Aspect-ratio	Есть	Handheld Print Projection Screen Tty Tv	Целое число/Целое число	Соотношение ширины и высоты отображаемой области. Указывается 2-мя числами, разделяемыми слэшем (/).
Color	Есть	Handheld Print Projection Screen Tty Tv	Целое число	Число бит на канал цвета. Например, значение 3 означает, что красный, синий и зеленый могут дать 512 цветов (23 * 23 * 23). Если значение не указано - функция определит, что устройство цветное.
Color-index	Есть	Handheld Print Projection Screen Tty Tv	Целое число	Определяет количество поддерживаемых устройством цветов.
Device-aspect-ratio	Есть	Handheld Print Projection Screen Tty Tv	Целое число/Целое число	Соотношение ширины и высоты всего экрана. Указывается 2-мя числами, разделяемыми слэшем (/).
Device-height Device-width	Есть	Все, кроме speech	Числовое значение и величина (px,em и др.)	Ширина и высота устройства. Как обычно, указывается числовое значение и величина. Например, 320px.
Grid	Нет	Все	Нет	Определяет, что устройство с фиксированным размером символов. К таким устройствам относятся терминалы и телефоны, поддерживающие только один шрифт.
Monochrome	Есть	Handheld Print Projection Screen Tty Tv	Целое число	Определяет, что устройство монохромное. Если указано число, то оно будет означать число бит на пиксель. Например, 8 даст 256 оттенков серого.
Orientation	Нет	Handheld Print Projection Screen Tty Tv	Landscape Portrait	Альбомная/книжная ориентация устройства.
Resolution	Есть	Handheld Print Projection Screen Tv	Разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)	Количество пикселей на дюйм/сантиметр.
Scan	Нет	Tv	Interlace Progressive	Чересстрочная или прогрессивная развертка телевизора. При чересстрочной развертке телевизор показывает сначала нечетные строки кадра, затем четные. При прогрессивной развертке кадр показывается целиком.