САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

Тег <style> атрибут media

❮ HTML <style> тег

Пример

Укажите стиль, используемый для печати:

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

</style>
Попробуйте сами »

Определение и использование

Атрибут media указывает, для какого носителя/устройства оптимизирован стиль CSS.

Атрибут media используется для указания того, что стиль предназначен для специальных устройств (например, iPhone), речевых или печатных носителей.

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


Поддержка браузеров

Атрибут
media Да Да Да Да Да

Синтаксис

<style media="value">

Возможные операторы

Значение Описание
and Определяет AND оператор
not Определяет NOT оператор
, Определяет OR оператор


Устройства

Значение Описание
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:500px)"
orientation Указывает ориентацию целевого дисплея/бумаги.
Возможное значение: "portrait" или "landscape"
Пример: media="all and (orientation: landscape)"
aspect-ratio Задает соотношение ширины и высоты целевой области отображения.
"min-" и "max-" можно использовать префиксы.
Пример: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio Задает соотношение ширины устройства/высоты устройства целевого дисплея/бумаги.
"min-" и "max-" можно использовать префиксы.
Пример: media="screen and (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="print and (resolution:300dpi)"
scan Задает способ сканирования телевизионного дисплея.
Возможные значения "progressive" и "interlace".
Пример: media="tv and (scan:interlace)"
grid Задает, является ли устройство вывода сеточным или растровым.
Возможные значения для сетки "1" и иначе "0".
Пример: media="handheld and (grid:1)"

❮ HTML <style> тег