Атрибут media в style HTML

HTML <style> тег

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

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

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

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

Пример

Пример 1

Определение стилей для печати:

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

Попробуйте это на практике

Пример 2

Группы стилей различаются с помощью атрибута width свойства media:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Попробуйте это на практике

Комментарий:Используются стили первой группы при ширине окна браузера менее 500 пикселей, и стили второй группы при ширине окна более 500 пикселей.

Грамматика

<style media="value>

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

Операторы Описание
and Определение оператора AND.
not Определение оператора NOT.
, Определение оператора OR.

Условия использования стиля могут быть очень детализированы. В первую очередь необходимо определить тип целевого устройства. В таблице ниже приведены все значения, соответствующие требованиям:

Устройство

Устройство Описание
all По умолчанию. Подходит для всех устройств.
aural Голосовой синтезатор.
braille Обратная связь в шрифте Брайля.
handheld Мобильные устройства (маленькие экраны, ограниченная полоса пропускания).
projection Проектор.
print Предварительный просмотр печати/страница для печати.
screen Компьютерный экран.
tty Телефонные пейджеры и аналогичные носители, использующие сетку символов с фиксированным интервалом.
tv Устройства типа телевизор (низкое разрешение, ограниченные возможности прокрутки).

Браузер отвечает за интерпретацию классификации устройств. Некоторые типы устройств (например, screen и print) имеют довольно одинаковую интерпретацию во всех браузерах, но интерпретация других устройств (например, handheld) может быть значительно более свободной. Поэтому очень важно проверить, соответствует ли интерпретация конкретного устройства в целевом браузере вашим ожиданиям.

Характеристики

Характеристики Описание
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

Определяет, является ли устройство сетчатым или растровым.

Сетчатые устройства используют фиксированную сетку для отображения контента, например, терминалы на основе символов и пейджеры с одним строковым отображением.

Поддерживаемые значения: 0 и 1 (1 означает сетчатое устройство).

Эта функция не имеет限定ных слов.

Например: media="handheld and (grid:1)"

Такие характеристики, как width, обычно используются вместе с限定ными словами min и max. Без этих限定ных слов использование стилей зависит от очень точного размера окна, но с ними условия становятся более гибкими.

В таблице перечислены и описаны различные доступные функции. Если не указано иное, эти функции можно использовать с min- и max- префиксами, образуя пороги, а не точные значения.

Как и в случае с определенными устройствами, эти функции также объясняются браузером. В зависимости от того, какие функции знает браузер и когда они существуют и могут быть использованы, ситуация может быть очень сложной. Если нужноapply стили к этим функциям, необходимо провести полное тестирование и быть готовым к использованию резервных стилей, если ожидаемые функции не будут доступны.

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка

HTML <style> тег