Атрибут media тега <a>
Описание
Атрибут media определяет тип устройства или медиа-характеристики, для которых предназначен связанный ресурс. Позволяет адаптировать контент ссылки под разные устройства и условия просмотра.
<a href="/print-version.html" media="print">Версия для печати</a>
<a href="/mobile.css" media="screen and (max-width: 600px)">Мобильные стили</a>
<a href="/image@2x.png" media="screen and (min-resolution: 2dppx)">HD изображение</a>
Основные медиа-запросы:
| Тип | Пример | Описание |
|---|---|---|
| Тип устройства | print, screen |
Определяет тип вывода |
| Ширина экрана | (max-width: 768px) |
Адаптация под мобильные |
| Ориентация | (orientation: portrait) |
Портретный режим |
| Разрешение | (min-resolution: 2dppx) |
Retina-экраны |
Рекомендации по использованию:
- Чаще всего применяется с CSS-файлами
- Может использоваться для адаптивных изображений
- Поддерживает сложные комбинации условий
- Синтаксис аналогичен медиа-запросам в CSS
- Браузер сам решает, загружать ли связанный ресурс
<a href="/large-image.jpg"
media="screen and (min-width: 1200px) and (min-resolution: 2dppx)"
title="HD версия для широких экранов">
Фото высокого качества
</a>
Атрибут media особенно полезен для:
- Адаптивных веб-страниц
- Различных версий одного документа
- Оптимизации загрузки ресурсов
- Специальных версий для печати
Важно: браузеры могут по-разному интерпретировать медиа-запросы в ссылках, в отличие от CSS.