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

Описание

Атрибут media для элемента <source> позволяет задать медиа-запросы, определяющие условия, при которых будет использоваться данный источник мультимедиа. Браузер выбирает первый подходящий <source> в порядке их объявления.

Пример использования:

<picture> <source media="(min-width: 1200px)" srcset="large.jpg"> <source media="(min-width: 800px)" srcset="medium.jpg"> <img src="small.jpg" alt="Адаптивное изображение"> </picture>

Синтаксис медиа-запросов:

Тип запроса Пример Описание
Ширина вьюпорта (min-width: 768px) Для экранов шире 768px
Высота вьюпорта (max-height: 600px) Для экранов короче 600px
Ориентация (orientation: landscape) Горизонтальная ориентация
Плотность пикселей (min-resolution: 2dppx) Для экранов высокой плотности
Комбинированные (min-width: 800px) and (orientation: portrait) Несколько условий

Пример с видео:

<video controls> <source media="(min-width: 1024px)" src="large.mp4" type="video/mp4"> <source media="(min-width: 600px)" src="medium.mp4" type="video/mp4"> <source src="small.mp4" type="video/mp4"> </video>

Рекомендации:

  1. Располагайте источники от наиболее к наименее специфичным
  2. Всегда указывайте fallback-элемент (<img> или последний <source>)
  3. Используйте логические операторы (and, not, only) для сложных условий
  4. Тестируйте на реальных устройствах с разными характеристиками
  5. Сочетайте с атрибутами srcset и sizes для изображений

Пример с комбинированными условиями:

<picture> <source media="(min-width: 1024px) and (orientation: landscape)" srcset="wide-large.jpg"> <source media="(min-width: 1024px)" srcset="large.jpg"> <source media="(min-resolution: 2dppx)" srcset="retina.jpg"> <img src="default.jpg" alt="Сложное адаптивное изображение"> </picture>

Отладка:

  • В Chrome DevTools используйте Device Mode для тестирования разных условий
  • Проверяйте свойство currentSrc у элемента для определения выбранного источника
  • Используйте медиа-запросы, аналогичные вашим CSS-запросам для согласованности

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

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

  • Chrome 38+
  • Firefox 38+
  • Safari 9.1+
  • Edge 12+
  • Opera 25+

Для Internet Explorer используйте полифилы или альтернативные решения.