Пример
Элемент <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 | Определяет оператор И |
| not | Определяет оператор НЕ |
| , | Определяет оператор ИЛИ |
Устройства
| Значение | Описание |
|---|---|
| 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 | Определяет соотношение 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)" |