Пример
Две разные таблицы стилей для двух разных типов носителей (экран и печать):
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
Попробуйте сами »
Определение и использование
Атрибут media указывает, для какого носителя/устройства оптимизирован целевой ресурс.
Этот атрибут в основном используется с таблицами стилей CSS для указания разных стилей для разных типов носителей.
Атрибут media может принимать несколько значений.
Поддержка браузерами
| Атрибут | |||||
|---|---|---|---|---|---|
| media | Да | Да | Да | Да | Да |
Синтаксис
<link media="значение">
Возможные операторы
| Значение | Описание |
|---|---|
| and | Задает оператор И |
| not | Задает оператор НЕ |
| , | Задает оператор ИЛИ |
Устройства
| Значение | Описание |
|---|---|
| all | По умолчанию. Для всех типов устройств |
| Для режима предварительного просмотра печати/печатных страниц | |
| screen | Для экранов компьютеров, планшетов, смартфонов и т.д. |
| speech | Для экранных дикторов, которые "зачитывают" страницу вслух |
| aural | Устарело. Синтезаторы речи |
| braille | Устарело. Устройства с брайлевским выводом |
| handheld | Устарело. Портативные устройства (маленький экран, ограниченная пропускная способность) |
| projection | Устарело. Проекторы |
| tty | Устарело. Телетайпы и аналогичные носители, использующие фиксированную сетку символов |
| tv | Устарело. Телевизионные устройства (низкое разрешение, ограниченная возможность прокрутки) |
Значения
| Значение | Описание |
|---|---|
| aspect-ratio | Задает соотношение ширины/высоты целевой области отображения. Можно использовать префиксы "min-" и "max-". Пример: media="screen and (max-aspect-ratio:16/9)" |
| color | Задает количество бит на цвет целевого дисплея. Можно использовать префиксы "min-" и "max-". Пример: media="screen and (min-color:3)" |
| color-index | Задает количество цветов, которое может отображать целевой дисплей. Можно использовать префиксы "min-" и "max-". Пример: media="screen and (min-color-index:256)" |
| device-aspect-ratio | Устарело. Задает соотношение device-width/device-height целевого дисплея/бумаги. |
| device-width | Устарело. Задает ширину целевого дисплея/бумаги. |
| device-height | Устарело. Задает высоту целевого дисплея/бумаги. |
| grid | Определяет, является ли устройство вывода сеточным или растровым. Возможные значения: "1" для сетки и "0" в противном случае. Пример: media="handheld and (grid:1)" |
| height | Задает высоту целевой области отображения. Можно использовать префиксы "min-" и "max-". Пример: media="screen and (max-height:700px)" |
| monochrome | Задает количество бит на пиксель в монохромном буфере кадров. Можно использовать префиксы "min-" и "max-". Пример: media="screen and (min-monochrome:2)" |
| orientation | Задает ориентацию целевого дисплея/бумаги. Возможные значения: "portrait" (портретная) или "landscape" (альбомная) Пример: media="all and (orientation: landscape)" |
| resolution | Задает плотность пикселей (dpi или dpcm) целевого дисплея/бумаги. Можно использовать префиксы "min-" и "max-". Пример: media="print and (min-resolution:300dpi)" |
| scan | Задает метод развертки телевизионного дисплея. Возможные значения: "progressive" (прогрессивная) и "interlace" (чересстрочная). Пример: media="tv and (scan:interlace)" |
| width | Задает ширину целевой области отображения. Можно использовать префиксы "min-" и "max-". Пример: media="screen and (min-width:500px)" |