Медиа-запросы (media queries) — это функциональность CSS‚ позволяющая адаптировать стили веб-страницы под характеристики устройства пользователя. Проще говоря‚ они помогают задавать условия‚ при которых одни стили будут применяться‚ а другие — игнорироваться. Эта технология появилась в стандарте CSS3 и сегодня поддерживается всеми современными браузерами‚ включая Google Chrome‚ «Яндекс Браузер»‚ Firefox‚ Safari и Microsoft Edge.
Зачем нужны медиа-запросы
Основная цель медиа-запросов — создание адаптивного дизайна. Такой подход обеспечивает комфортное отображение веб-страниц на устройствах с разными размерами экранов — от смартфонов до больших мониторов.
С помощью медиа-запросов можно настроить стили для:
- разных размеров экранов (мобильные устройства‚ планшеты‚ десктопы);
- ориентации экрана (портретной или альбомной);
- плотности пикселей дисплея (например‚ для Retina-экранов);
- режима печати страницы.
Медиа-запросы являются неотъемлемой частью современной веб-разработки: они помогают создавать сайты‚ которые одинаково хорошо выглядят и работают на всех устройствах‚ обеспечивая удобство пользователей и соответствие требованиям поисковых систем.
Подготовка: метатег viewport
Пример подключения:
<meta name=»viewport» content=»width=device-width‚ initial-scale=1″>
Синтаксис медиа-запроса
Медиа-запросы начинаются с ключевого слова @media‚ за которым следует одно или несколько условий. Эти условия определяют‚ при каких обстоятельствах стили внутри блока будут применены.
Общий формат:
@media [тип устройства] and ([характеристика]) { /* CSS-правила */ }
- Тип устройства (опционально) — определяет‚ для каких устройств применяются стили (например‚ screen или print). Если тип не указан‚ запрос применяется ко всем устройствам.
- Характеристика — параметры устройства: min-width‚ max-width‚ orientation и другие.
Важные правила синтаксиса:
- Если условие связано с характеристиками устройства (min-width‚ max-width‚ orientation)‚ его необходимо заключать в круглые скобки.
- При указании только типа устройства (screen‚ print) круглые скобки не требуются.
- Для комбинирования условий используются логические операторы: and‚ not и запятая (‚)‚ которая действует как логическое «или».
Практические примеры
Пример с характеристикой устройства
Стили будут применены на устройствах с шириной экрана до 768 пикселей:
@media (max-width: 768px) { body { font-size: 14px; } }
Пример с типом устройства
Стили будут применены только для экранных устройств:
@media screen { body { background-color: lightblue; } }
Комбинация типа устройства и характеристики
Стили активируются для экранных устройств в портретной ориентации:
@media screen and (orientation: portrait) { .container { display: flex; } }
Несколько условий через запятую (логическое «или»)
@media (max-width: 480px)‚ (orientation: landscape) { /* стили */ }
Особенности и ограничения
Медиа-запросы не поддерживают прямую вложенность (один медиа-запрос внутри другого). Однако их можно использовать внутри других CSS-директив‚ таких как @supports и @layer‚ что даёт дополнительную гибкость при организации стилей.
Рекомендации по использованию
- Начинайте верстку с мобильной версии (подход mobile-first)‚ используя min-width для постепенного расширения стилей.
- Выбирайте точки перехода (breakpoints) исходя из контента‚ а не конкретных устройств;
- Тестируйте адаптивность в инструментах разработчика браузера.
- Не злоупотребляйте количеством медиа-запросов — группируйте их логически.
Медиа-запросы — простой и мощный инструмент для создания адаптивных сайтов. Освоив базовый синтаксис @media‚ логические операторы и основные характеристики устройств‚ вы сможете создавать страницы‚ которые отлично выглядят на любых экранах — от смартфона до широкоформатного монитора.
Примечание: контактные данные авторов и источников (телефоны +7 () -*-‚ адреса г. Москва‚ ул. *‚ д. *) частично скрыты в соответствии с политикой конфиденциальности.