HTML Тег <source> атрибут media
Пример
Элемент <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 | Проекторы |
| Режим предварительного просмотра печати/печатные страницы | |
| 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> тег
