CSS :: Правило @media
okmysite.com
HTML и CSS для начинающих

CSS :: Правило @media

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

Синтаксис

@media [[not | only] [<тип носителя>] [and | or ] [(<медиа-особенности>)]]# {<стилевые правила>};

Значения

Типы носителей (если их несколько, то они перечисляются через запятую):

  • all – все устройства (применяется по умолчанию);
  • aural – синтезаторы речи и звука;
  • braille – устройства, использующиеся слепыми людьми (основаны на системе Брайля);
  • embossed – принтеры, использующие для печати систему Брайля;
  • handheld – смартфоны, планшеты и другие устройства с малой шириной экрана;
  • print – принтер (так будет выглядеть страница на бумаге);
  • screen – экран монитора;
  • speech – речевые браузеры;
  • projection – проектор;
  • tty – терминалы и другие портативные устройства с ограниченными возможностями экрана.
  • tv – телевизор.

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

  • 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 (или) используется обычная запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно из условий выполняется, то стиль будет применён (см. пример №1).

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

Также медиа-запросы можно использовать и непосредственно в элементе «link», указав их в качестве значения атрибута media (см. пример №2).

Ссылки

Примеры


/* Данный класс будет применен в ходе печати страницы или 

вывода на экран компьютерного терминала */

@media print, tty{

	.my_color_1{

	color: black;

	}

}





/* Этот класс будет применен, если это экран монитора и

ширина области просмотра устройства не превышает 1300px  */

@media screen (max-width: 1300px){

	.my_color_2{

	color: green;

	}

}





/* Этот класс будет применен ко всем типам устройств, если

ширина области просмотра устройства не меньше 1301px, а соотношение 

ширины и высоты области просмотра не менее 3/4  */

@media (min-width: 1301px) and (min-aspect-ratio: 3/4){

	.my_color_3{

	color: red;

	}

}



		

/* Этот класс будет применен либо для всех устройст, кроме экрана монитора, 

у которых ширина области просмотра не менее 1000px, либо для экрана монитора 

в ландшафтном режиме просмотра */

@media not screen and (min-width: 1000px), screen and (orientation: landscape){

	.my_color_4{

	color: blue;

	}

}





/* Этот класс не будет применен к старым браузерам */

@media only screen and (min-width: 1000px){

	.my_color_5{

	color: yellow;

	}

}

Пример №1


<!-- Эти стили мы использовали на нашем сайте -->



<!-- Для компьютерной версии -->

<link type="text/css" rel="stylesheet" href="body.css?v01">

<link type="text/css" rel="stylesheet" href="pages.css?v01">	



<!-- Для мобильной версии -->

<link type="text/css" media="(max-width: 900px)" href="body_mob.css?v01" rel="stylesheet">	

<link type="text/css" media="(max-width: 900px)" href="pages_mob.css?v01" rel="stylesheet">

Пример №2.