HTML Тег <link> атрибут media
Пример
Две разные таблицы стилей для двух разных типов носителей (просмотр и печать):
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
Попробуйте сами »
Определение и использование
Атрибут media указывает, для какого носителя/устройства оптимизирован целевой ресурс.
Атрибут media в основном используется с таблицами стилей CSS для указания различных стилей для различных типов носителей.
Атрибут media может принимать несколько значений.
Поддержка браузеров
| Атрибут | |||||
|---|---|---|---|---|---|
| media | Да | Да | Да | Да | Да |
Синтакси
<link media="value">
Возможные операторы
| Значение | Описание |
|---|---|
| and | Определяет оператор AND |
| not | Определяет оператор NOT |
| , | Определяет оператор OR |
Устройства
| Значение | Описание |
|---|---|
| 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 | Согласованный. Задает высоту целевого отображения/написания. |
| 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)" |
