Атрибут media HTML тега style

Атрибут media определяет устройство вывода, для которого данная таблица стилей оптимизирована. Таким образом, для каждого устройства можно создать свою таблицу стилей, учитывающую особенности конкретного устройства вывода и оптимизирующую веб-страницу именно для него.

Атрибут media может принимать несколько значений.

Синтаксис атрибута

<style media="значение">

Значения атрибута

Операторы

ЗначениеОписание
andОпределяет оператор И
notОпределяет оператор НЕ
,Определяет оператор ИЛИ

Устройства

ЗначениеОписание
allЗначение по умолчанию. Все устройства вывода.
auralРечевые синтезаторы
brailleУстройства вывода на основе шрифта Брайля
handheldРучные устройства вывода (наладонники, смартфоны, устройства с небольшим экраном вывода)
projectionПроекторы
printПечатающие устройства (например, принтеры)
screenКомпьютерные мониторы
ttyТелетайпы, терминалы и другие устройства с ограниченными возможностями экрана (для них нельзя использовать пикселы в качестве единиц измерения)
tvТелевизоры (для них характерно низкое разрешение и ограниченные возможности прокрутки)

Значения

ЗначениеОписание
widthОпределяет ширину целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (min-width:500px)"
heightОпределяет высоту целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (max-height:700px)"
device-widthОпределяет всю доступную ширину экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (device-width:500px)"
device-heightОпределяет всю доступную высоту экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (device-height:700px)"
orientationОпределяет ориентацию целевого дисплея/бумаги. Возможные значения - "portrait" или "landscape". Например, media="screen and (orientation: landscape)"
aspect-ratioОпределяет соотношение ширины и высоты (width/height) целевой области отображения. Можно использовать префиксы "min-" и "max-". Например, media="screen and (aspect-ratio:16/9)"
device-aspect-ratioОпределяет соотношение device-width/device-height экрана или печатной страницы. Можно использовать префиксы "min-" и "max-". Например, media="screen and (devic-aspect-ratio:16/9)"
colorОпределяет число бит на цветовой канал дисплея. Можно использовать префиксы "min-" и "max-". Например, media="screen and (color:3)"
color-indexОпределяет количество цветов, поддерживаемых устройством. Можно использовать префиксы "min-" и "max-". Например, media="screen and (min-color-index:256)"
monochromeОпределяет число бит на пиксель в монохромном фреймовом буфере. Можно использовать префиксы "min-" и "max-". Например, media="screen and (monochrome:2)"
resolutionОпределяет разрешение устройства (dpi или dpcm). Можно использовать префиксы "min-" и "max-". Например, media="screen and (resolution:300dp)"
scanОпределяет тип развертки телевизионного экрана. Возможные значения - "progressive" или "interlace". Например, media="screen and (scan: interlace)"
gridОпределяет, является ли устройство с фиксированным размером символов или нет. Возможные значения: "1" — устройство с фиксированным размером символов, "0" — нет. Например, media="handheld and (grid:1)"

Пример использования атрибута

Таблица стилей для устройств печати (например, принтеров):


<style media="print">
   h1 { color:#000000; }
   p { color:#000000; }
   body { background-color:#FFFFFF; }
</style>