Медиа-запросы позволяют применять определенные стили CSS в зависимости от характеристик устройства или области просмотра. Они используются для создания адаптивного дизайна, который корректно отображается на различных экранах, включая мобильные устройства, планшеты и десктопы.
Основной синтаксис медиа-запроса:
css<тип_медиа> определяет, к какому типу устройства применяется запрос (например, screen, print, all).<выражение> задает условия, при которых применяются стили (например, ширина, высота, ориентация экрана, разрешение).Популярные выражения для адаптивной верстки:
min-width: Стили применяются, если ширина области просмотра равна или больше указанного значения.max-width: Стили применяются, если ширина области просмотра равна или меньше указанного значения.orientation: Стили применяются в зависимости от ориентации экрана (portrait или landscape).resolution: Стили применяются в зависимости от разрешения экрана.Пример использования max-width для стилизации на мобильных устройствах:
cssПример использования min-width для стилизации на десктопах (подход "mobile first"):
cssКомбинация выражений с операторами and, or (or в медиа-запросах записывается через запятую) и not:
cssМета-тег viewport важен для корректной работы медиа-запросов на мобильных устройствах:
htmlwidth=device-width устанавливает ширину области просмотра равной ширине устройства.initial-scale=1.0 устанавливает начальный коэффициент масштабирования.Без этого мета-тега многие мобильные браузеры масштабируют страницу по умолчанию, игнорируя реальную ширину устройства, что нарушает адаптивность.