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

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

❮ HTML <source> тег

Пример

Элемент <picture> с двумя исходными файлами и резервным изображением:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Цветы" style="width:auto;">
</picture>
Попробуйте сами »

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

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

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


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

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

Атрибут
media 38.0 9.0 15.0 9.1 25.0

Синтаксис

<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 Задает соотношение ширины устройства/высоты устройства целевого дисплея/бумаги.
"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 <source> тег