Медиазапросы используют, когда нужно адаптировать всю страницу под характеристики вьюпорта или устройства (ширина окна, ориентация, плотность пикселей). Контейнерные запросы применяют, когда конкретный компонент должен подстраиваться под размеры родительского контейнера, независимо от размеров окна. На практике медиазапросы отвечают за крупные переломы макета, а контейнерные запросы — за адаптивное поведение отдельных переиспользуемых блоков.
Медиазапросы зависят от характеристик вьюпорта или устройства: ширины и высоты окна, ориентации экрана, плотности пикселей и т.п. Ими удобно управлять «глобальным» поведением интерфейса: перестраивать сетку страницы (например, с трёх колонок на одну), изменять базовые размеры шрифтов и отступов, переключаться между условными режимами desktop / tablet / mobile, скрывать тяжёлые блоки на маленьких экранах.
Контейнерные запросы завязаны не на окно, а на размеры конкретного контейнера. Один и тот же компонент может стоять и в широкой центральной колонке, и в узкой боковой панели, и в карточке внутри слайдера — и через контейнерные запросы он сам подстраивается под доступное место родителя: меняет количество колонок, размер элементов, порядок блоков и т.д.
Ключевая разница: медиазапросы отвечают на условие «если ширина окна такая — рисуем так», а контейнерные запросы — на условие «если этому блоку доступно столько-то места — рисуем так». Это делает компоненты менее зависимыми от общей сетки страницы и упрощает их переиспользование в разных частях проекта и в дизайн‑системах. На реальных проектах обычно комбинируют подходы: медиазапросы — для общей структуры и крупных переломов, контейнерные запросы — для точной настройки поведения виджетов и карточек внутри этой структуры.
Ниже пример использования медиазапроса, где меняется типографика и схема раскладки всей страницы в зависимости от ширины вьюпорта.
Теперь пример с контейнерным запросом: один и тот же компонент .card автоматически меняет внутреннюю раскладку только в зависимости от ширины родительского контейнера, не опираясь на конкретные брейкпоинты окна.
Отметьте свой прогресс