CSS медиа-запросы

Модуль CSS медиа-запросов позволяет проверять и запрашивать значения области просмотра и характеристики браузера или устройства, чтобы условно применять CSS-стили на основе текущей среды пользователя. Медиа-запросы используются в CSS @media правиле и других контекстах и языках, таких как HTML и JavaScript.

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

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

В CSS используйте @media правило, чтобы условно применять часть таблицы стилей на основе результата медиа-запроса. Для условного применения всей таблицы стилей используйте @import.

При разработке повторно используемых HTML-компонентов вы также можете использовать запросы к контейнерам, которые позволяют применять стили на основе размера содержащего элемента, а не области просмотра или других характеристик устройства.