Медиа-запросы в CSS
http://belarusweb.net
Основы создания сайтов

Медиа-запросы, css-правило @media

Если возникает необходимость указать типы носителей, а также особые условия, для которых будет применяться данная таблица стилей, нужно использовать правило @media (см. пример 6.3). Синтаксис данного правила имеет вид:
@media тип_носителя_1, тип_носителя_2,... and|not|only (медиа_особенности) {стили для этих типов}.

Типы носителей мы уже перечисляли в ходе изучения HTML, когда рассматривали атрибут media служебного элемента 'link'. Перечислим их еще раз:

  • 'all' – все устройства (применяется по умолчанию);
  • 'aural' – синтезаторы речи и звука;
  • 'braille' – устройства, использующиеся слепыми людьми (основаны на системе Брайля);
  • 'embossed' – принтеры, использующие для печати систему Брайля;
  • 'handheld' – смартфоны, планшеты и другие устройства с малой шириной экрана;
  • 'print' – принтер (так будет выглядеть страница на бумаге);
  • 'screen' – экран монитора;
  • 'speech' – речевые браузеры;
  • 'projection' – проектор;
  • 'tty' – терминалы и другие портативные устройства с ограниченными возможностями экрана.
  • 'tv' – телевизор.
/* Данный класс будет применен в ходе печати страницы или 
вывода на экран компьютерного терминала */
@media print, tty{
	.myColor_1{
	color: black;
	}
}


/* Этот класс будет применен, если это экран монитора и
ширина области просмотра устройства не превышает 1300px  */
@media screen (max-width: 1300px){
	.myColor_2{
	color: green;
	}
}


/* Этот класс будет применен ко всем типам устройств, если
ширина области просмотра устройства не меньше 1301px, а соотношение 
ширины и высоты области просмотра не менее 3/4  */
@media (min-width: 1301px) and (min-aspect-ratio: 3/4){
	.myColor_3{
	color: red;
	}
}

		
/* Этот класс будет применен либо для всех устройст, кроме экрана монитора, 
у которых ширина области просмотра не менее 1000px, либо для экрана монитора 
в ландшафтном режиме просмотра */
@media not screen and (min-width: 1000px), screen and (orientation: landscape){
	.myColor_4{
	color: blue;
	}
}


/* Этот класс не будет применен к старым браузерам */
@media only screen and (min-width: 1000px){
	.myColor_5{
	color: yellow;
	}
}

Пример 6.3. Использование правила @media

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

  • 'aspect-ratio' – определяет соотношение ширины и высоты отображаемой области просмотра устройства (не путать с размерами всего экрана). Данное соотношение указывается в виде двух целых положительных чисел, которые разделяются между собой слэшем '/' (например, 16/9). Соотношение разрешается также задавать в виде минимально допустимого значения 'min-aspect-ratio' или максимально допустимого 'max-aspect-ratio'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
  • 'color' – задается в виде положительного целого числа (степени двойки), которое определяет количество бит на цвет для устройства. Например, если задано число 3, то это означает, что таблица стилей будет применена к устройству, в котором красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано вообще, то осуществляется проверка того, чтобы устройство просто являлось цветным. Также разрешается использовать префикс и задавать условие в виде 'min-color' и 'max-color'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
  • 'color-index' – задается в виде положительного целого числа, которое определяет количество цветов, которое поддерживает устройство (например, 256). Разрешается использовать префикс и задавать условие в виде 'min-color-index' и 'max-color-index'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
  • 'device-aspect-ratio' – определяет соотношение ширины и высоты всего экрана устройства. Данное соотношение указывается в виде двух целых положительных чисел, которые разделяются между собой слэшем '/' (например, 16/9). Соотношение разрешается также задавать в виде минимально допустимого значения 'min-device-aspect-ratio' или максимально допустимого 'max-device-aspect-ratio'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
  • 'device-height' – определяет всю доступную высоту экрана устройства или печатной страницы. Разрешается использовать префикс и задавать условие в виде 'min-device-height' и 'max-device-height'. Данная особенность используется для всех устройств кроме speech.
  • 'device-width' – определяет всю доступную ширину экрана устройства или печатной страницы. Разрешается использовать префикс и задавать условие в виде 'min-device-width' и 'max-device-width'. Данная особенность используется для всех устройств кроме speech.
  • 'grid' – определяет, что данное устройство относится к типу с фиксированным размером символов (например, некоторые виды терминалов или телефонов). В таком устройстве символы выстраиваются по заданной сетке и имеют одинаковую ширину и высоту. Отметим, что для подобных устройств следует использовать относительные единицы, а не пикселы. Данная особенность используется для всех устройств и значений не принимает.
  • 'height' – определяет доступную высоту отображаемой области (например, высоту окна браузера). Разрешается использовать префикс и задавать условие в виде 'min-height' и 'max-height'. Данная особенность используется для всех устройств кроме speech.
  • 'monochrome' – задается в виде положительного целого числа (степени двойки), которое определяет количество бит на пиксель для устройства с монохромным выводом. Например, если задано число 8, то это означает, что таблица стилей будет применена к устройству, способному отображать 256 оттенков своего цвета. Если значение не указано вообще, то осуществляется проверка того, чтобы устройство просто являлось монохромным. Разрешается использовать префикс и задавать условие в виде 'min-monochrome' и 'max-monochrome'. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
  • 'orientation' – определяет, в каком режиме просмотра находится дисплей: landscape (ландшафтный режим, в котором ширина дисплея больше его высоты) или portrait (портретный режим, в котором высота дисплея больше его ширины). Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
  • 'resolution' – определяет разрешение (плотность пикселей) устройства вывода. В качестве значений принимает число точек на дюйм (например, 300dpi) или точек на сантиметр (например, 300dpcm). Данная особенность используется для устройств: handheld, print, projection, screen, и tv.
  • 'scan' – определяет тип развертки телевизора: interlace (череcстрочная) или progressive (прогрессивная). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, а затем чётные. Это позволяет сократить передаваемые данные по сравнению с прогрессивной развёрткой, при которой кадр передаётся и показывается целиком.
  • 'width' – определяет доступную ширину отображаемой области (например, ширину окна браузера). Разрешается использовать префикс и задавать условие в виде 'min-width' и 'max-width'. Данная особенность используется для всех устройств кроме speech.

Что касается логических операторов and (и), а также not (не), то они предназначены для составления более сложных условий. Применять их можно как перед типом устройства, так и перед медиа-особенностями. При этом следует помнить, что оператор not имеет наименьший приоритет, а вместо логического оператора or (или) используется обычная запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно из условий выполняется, то стиль будет применён (см. пример 6.3).

Оператор only (только) применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Если же браузер поддерживает медиа-запросы, то оператор only просто игнорируется.

В конце добавим, что медиа-запросы можно использовать и непосредственно в элементе 'link', указав их в качестве значения атрибута media (см. пример 6.3).