Это старая версия документа!
# Медиа-запросы
Медиа-запросы (media queries) – это функциональность CSS, позволяющая адаптировать стили веб-страницы к характеристикам устройства пользователя.
Основная цель медиа-запросов – создание адаптивного дизайна. Такой подход обеспечивает комфортное отображение веб-страниц на устройствах с разными размерами экранов, от смартфонов до больших мониторов.
Для корректной работы адаптивного дизайна важен метатег viewport, который указывается в разделе <head> HTML-документа. Этот метатег помогает браузеру интерпретировать ширину экрана устройства и масштаб отображения страницы. Без него адаптивные стили могут работать некорректно.
Пример подключения метатега viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
Общий синтаксис медиа-выражения:
@media [тип устройства] and ([характеристика]) { /* CSS-правила */ }
здесь:
- тип устройства (опционально) – определяет, для каких устройств применяются стили (например, screen или print). Если тип не указан, запрос будет применяться ко всем устройствам.
- характеристика — указывает параметры устройства, такие как min-width, orientation и так далее.
- and - логический оператор, применяемый для комбинирования нескольких условий, так же применяются операторы not и запятая (,), которая действует как логическое «или».
Пример:
@media (min-width: 768px) and (max-width: 1440px)
## Медиа-характеристики
Медиа-характеристики (или медиа-функции) позволяют задавать условия, связанные с особенностями устройства или окружения. Они используются в @media для применения стилей при выполнении определённых условий, например, для ширины, высоты, ориентации экрана и плотности пикселей. Каждая характеристика должна быть заключена в круглые скобки.
Для создания диапазонов или ограничения значений используются префиксы min- (минимум) и max- (максимум).
- min- задаёт минимальное значение характеристики, при котором стили будут применяться.
- max- задаёт максимальное значение характеристики.
Эти префиксы удобны для адаптивного дизайна, когда нужно ограничить действие стилей в определённых рамках.
Примеры использования:
width – ширина области просмотра:
@media (min-width: 768px) { ... } /* Ширина экрана больше 768px */ @media (max-width: 1399.98px) { ... } /* Ширина экрана меньше 1400px */ @media (min-width: 576px) and (max-width: 1199.98px) { ... } /* Диапазон ширины */
height – высота области просмотра:
CSS
Копировать @media (min-height: 720px) { … } /* Высота экрана больше 720px */ orientation – ориентация экрана (альбомная или портретная):
CSS
Копировать @media (orientation: landscape) { … } /* Альбомная ориентация */ @media (orientation: portrait) { … } /* Портретная ориентация */ aspect-ratio – соотношение сторон области просмотра:
CSS
Копировать @media (min-aspect-ratio: 9/16) { … } /* Минимальное соотношение сторон 9:16 */ @media (max-aspect-ratio: 16/9) { … } /* Максимальное соотношение сторон 16:9 */ resolution – плотность пикселей:
CSS
Копировать @media (min-resolution: 150dpi) { … } /* Минимальная плотность 150 dpi */ @media print and (min-resolution: 300dpi) { … } /* Для печати с плотностью более 300 dpi */ Использование min- и max- помогает настроить адаптивный дизайн, применяя стили только в нужных диапазонах или при определённых минимальных/максимальных значениях.