Как работают медиа-запросы в веб-разработке для адаптивной верстки, включая мобильные устройства?

Медиа-запросы позволяют применять определенные стили CSS в зависимости от характеристик устройства или области просмотра. Они используются для создания адаптивного дизайна, который корректно отображается на различных экранах, включая мобильные устройства, планшеты и десктопы.

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

css

• <тип_медиа> определяет, к какому типу устройства применяется запрос (например, screen, print, all).
• <выражение> задает условия, при которых применяются стили (например, ширина, высота, ориентация экрана, разрешение).

Популярные выражения для адаптивной верстки:

• min-width: Стили применяются, если ширина области просмотра равна или больше указанного значения.
• max-width: Стили применяются, если ширина области просмотра равна или меньше указанного значения.
• orientation: Стили применяются в зависимости от ориентации экрана (portrait или landscape).
• resolution: Стили применяются в зависимости от разрешения экрана.

Пример использования max-width для стилизации на мобильных устройствах:

css