Атрибут media тега <style>
Описание
Атрибут media для тега <style> позволяет указать медиа-запросы, определяющие условия применения CSS-стилей. Это мощный инструмент для создания адаптивного дизайна.
<style media="(max-width: 768px)">
body {
font-size: 14px;
}
</style>
Основные типы медиа-запросов:
| Тип | Пример | Описание |
|---|---|---|
| Ширина экрана | (max-width: 600px) |
Для мобильных устройств |
| Ориентация | (orientation: landscape) |
Горизонтальный режим |
| Плотность пикселей | (min-resolution: 2dppx) |
Для Retina-экранов |
| Тип устройства | print |
Стили для печати |
Комбинирование условий:
<style media="(min-width: 768px) and (max-width: 1024px)">
.container {
width: 90%;
}
</style>
Особенности работы:
- Поддерживается всеми современными браузерами
- Можно использовать несколько тегов <style> с разными media
- Альтернатива медиа-запросам в CSS-файлах
- Позволяет разделять стили по условиям
Рекомендации:
- Используйте логические операторы (and, not, only)
- Оптимизируйте порядок медиа-запросов (от mobile-first)
- Для сложных проектов предпочитайте CSS-файлы
- Тестируйте на реальных устройствах
Ограничения:
- Увеличивает размер HTML-документа
- Менее удобен для поддержки, чем отдельные CSS-файлы
- Нет возможности кэширования
Пример для печати:
<style media="print">
nav, footer {
display: none;
}
body {
font-size: 12pt;
color: #000;
}
</style>
Примечание: Для большинства проектов лучше использовать медиа-запросы в отдельных CSS-файлах, а не в атрибуте media тега <style>.