English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Атрибут source media принимает любые эффективные медиа-запросы, обычно определяемые в CSS, атрибут media может принимать несколько значений.
Элемент <picture> с двумя источниками и одним резервным изображением:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Использование атрибута source media в HTML - базовый учебник (oldtoolbag.com)</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <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="Flowers" style="width:auto;"> </picture> <p>Измените размер браузера, чтобы посмотреть различные версии изображения, загружаемые при различных размерах экрана. Браузер найдет первый элемент source, соответствующий текущей ширине экрана пользователя, и получит изображение, указанное в свойстве srcset.</p> <p>Элемент img - это последний подэлемент блока изображения. Элемент img используется для обеспечения обратной совместимости для браузеров, которые не поддерживают элемент picture, или для браузеров, у которых нет соответствующего источника метки.</p> </p> </body> </html>Проверьте, </>/
IEFirefoxOperaChromeSafari
Все основные браузеры поддерживают атрибут media. Замечание: IE12 и более ранние версии или Safari 9.0 и более ранние версии не поддерживают элемент picture
Атрибут media принимает любуюvalidую медиа-запрос, обычно определяемую в CSS.
Внимание:Этот атрибут может принимать несколько значений.
<source> тег является новым тегом в HTML5.
<source media="value>
| Значение | Описание |
|---|---|
| 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 | Указать количество bits на pixel в монохромном буфере кадров. Можно использовать префиксы "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)" |