HTML <link> mediaатрибут

HTML link 标签参考手册Тег HTML <link>

Примеры

Две разные таблицы стилей для двух разных типов носителей (экран компьютера и печать):

<head>
<link rel="stylesheet" type="text/css" href="theme.css.html">
<link rel="stylesheet" type="text/css" href="print.css.html" media="print">
</head>

Попробуйте сами »

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

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Все основные браузеры поддерживают атрибут media.

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

Атрибут media указывает, на каком устройстве будет отображаться связанный документ.

Этот атрибут часто используется с таблицами стилей CSS, чтобы задавать разные стили для разных типов носителей.

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

Различия между HTML 4.01 и HTML5

Атрибут media теперь поддерживает больше значений.

Синтаксис

<link media="value">

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

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

Устройства

Значение Описание
all По умолчанию. Применяется ко всем устройствам.
aural Синтезаторы речи.
braille Устройства Брайля с обратной связью.
handheld Карманные устройства (маленькие экраны, ограниченная пропускная способность).
projection Проекторы.
print Режим предварительного просмотра печати / печатные страницы.
экран Экраны компьютеров.
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 (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 link 标签参考手册HTML-тег <link> Другие расширения