Свойство media элемента HTML <source>

HTML <source> тег

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

media Свойство принимает любые эффективные медиа-запросы, как правило, определяемые в CSS.

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

Пример

Элемент <picture>, содержащий два источника файлов и резервное изображение:

<picture>
  <source media="(min-width:650px)" srcset="flower-1.jpg">
  <source media="(min-width:465px)" srcset="flower-2.jpg">
  <img src="flower-3.jpg" alt="Flowers" style="width:auto;">
</picture>

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

Грамматика

<source media="media_query>

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

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

Определяет пропорцию 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)"
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)"

Поддержка браузерами

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 9.0 15.0 9.1 25.0

HTML <source> тег