Атрибут media тега HTML <link>
Определение и использование
media Атрибут определяет, для какого медиа/устройства оптимизирован целевой ресурс.
media Атрибут определяет, на каком устройстве будет отображаться связанный документ.
Этот атрибут в основном используется вместе с таблицами стилей CSS для назначения различных стилей для различных типов медиа.
media Атрибут может принимать несколько значений.
Пример
Два различных стиля для двух различных типов медиа (экран и печать):
<head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> </head>
Грамматика
<link media="value>
Возможные операторы
| Операторы | Описание |
|---|---|
| and | Определяет оператор AND. |
| not | Определяет оператор NOT. |
| , | Определяет оператор OR. |
Устройство
| Устройство | Описание |
|---|---|
| all | По умолчанию. Используется для всех типов устройств. |
| Используется для предварительного просмотра печати/страницы для печати. | |
| screen | Используется для компьютерных экранов, планшетов, смартфонов и т.д. |
| speech | Используется для чтения страниц на экране. |
| aural | Устарело.Голосовой синтезатор. |
| braille | Устарело.Устройства обратной связи шрифта Брайля. |
| handheld | Устарело.Мобильные устройства (маленький экран, ограниченная полоса пропускания). |
| projection | Устарело.Проектор. |
| tty | Устарело.Используются телетайпные терминалы и аналогичные媒体的 с фиксированным интервалом символов. |
| tv | Устарело.Устройства типа телевизора (низкое разрешение, ограниченная способность скроллинга). |
Значение
| Значение | Описание |
|---|---|
| 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)" |
| 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 (monochrome:2)" |
| Направление |
Указать направление целевого экрана/бумаги. Возможные значения: "portrait" или "landscape". Пример: media="all and (orientation: landscape)" |
| Разрешение |
Указать разрешение целевого экрана/бумаги (dpi или dpcm). Используйте префиксы "min-" и "max-". Пример: media="print and (resolution:300dpi)" |
| Сканирование |
Указать метод сканирования телевизионного экрана. Возможные значения: "progressive" и "interlace". Пример: media="tv and (scan:interlace)" |
| Ширина |
Указать ширину целевой области отображения. Используйте префиксы "min-" и "max-". Пример: media="screen and (min-width:500px)" |
Поддержка браузеров
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Поддержка | Поддержка | Поддержка | Поддержка | Поддержка |
