HTML <style> mediaАтрибут
Примеры
Две разные таблицы стилей для двух разных типов носителей (экран и печать):
Попробуйте сами »
Поддержка браузеров
Все основные браузеры поддерживают атрибут media.
Определение и использование
Атрибут media указывает, для каких медиа/устройств оптимизирован текущий ресурс.
Этот атрибут в основном используется в таблицах стилей CSS для задания разных стилей для разных типов медиа.
Совет:Этот атрибут может принимать несколько значений.
Различия между HTML 4.01 и HTML5
Нет.
Синтаксис
Возможные операторы
| Значение | Описание |
|---|---|
| и | Указывает оператор AND. |
| not | Указывает оператор NOT. |
| , | Указывает оператор OR. |
Устройства
| Значение | Описание |
|---|---|
| all | По умолчанию. Применяется ко всем устройствам. |
| aural | Синтезаторы речи. |
| braille | Брайлевские устройства обратной связи для слепых. |
| handheld | Карманные устройства (маленькие экраны, ограниченная пропускная способность). |
| projection | Проекторы. |
| Режим предварительного просмотра печати / печатные страницы. | |
| экран | Экран компьютера (по умолчанию). |
| 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:500px)" |
| orientation |
Задает ориентацию целевого дисплея/бумаги. Возможные значения: "portrait" или "landscape" Пример: media="all and (orientation: landscape)" |
| aspect-ratio |
Задает соотношение ширины/высоты целевой области отображения. Можно использовать префиксы "min-" и "max-". Пример: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio |
Задает соотношение device-width/device-height целевого дисплея/бумаги. Можно использовать префиксы "min-" и "max-". Пример: media="screen and (device-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)" |
| разрешение |
Указывает плотность пикселей (dpi или dpcm) целевого дисплея/бумаги. Можно использовать префиксы "min-" и "max-". Пример: media="print and (resolution:300dpi)" |
| scan |
Указывает метод развертки ТВ-дисплеев. Возможные значения: "progressive" и "interlace". Пример: media="tv and (scan:interlace)" |
| grid |
Указывает, является ли устройство вывода сеткой или растровым изображением. Возможные значения: "1" для сетки, в противном случае "0". Пример: media="handheld and (grid:1)" |
HTML-тег <style> Другие расширения