Адаптивность без экрана: @container против @media

Правило @media — обёртка: в скобках условие, а в фигурных скобках обычные правила. Пока условие выполняется, правила внутри действуют; перестало — браузер их не применяет. Чаще всего условие спрашивает о размере окна: @media (max-width: 600px) { … } читается как «окно не шире 600 пикселей», а (min-width: 600px) — «не уже 600». О высоте спрашивают так же, через max-height и min-height.

Окно здесь — не монитор, а область, в которой браузер раскладывает документ. У вкладки это её видимая часть. А у примера учебника свой документ: его страница стоит в рамке, и для её стилей окно — сама рамка. Высота рамки у всех читателей одна, 140 пикселей. В примере заголовок чёрный, а при окне не выше 200 пикселей — красный. Прогноз: каким цветом окажется заголовок на странице примера, если ваш экран заведомо выше 200 пикселей?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>@media: условие про окно</title>
  <style>
  .title { color: rgb(0, 0, 0); }
  @media (max-height: 200px) { .title { color: rgb(255, 0, 0); } }
</style>
</head>
<body>

<p class="title">Кофе</p>
</body>
</html>

measure(".title", "color");

С шириной так не выйдет, и это стоит увидеть своими глазами. Рамка примера тянется на всю колонку текста: на широком мониторе в ней 732 пикселя, на телефоне шириной 320 — всего 270. Поэтому условие про ширину не даёт общего ответа: он верен только для той страницы, на которой пример запущен. Замените в примере max-height: 200px на min-width: 400px и запустите снова: на компьютере заголовок останется красным, а на телефоне, который держат вертикально, станет чёрным.

Условие не делает правила сильнее. Оно только включает их, а спор решает тот же судья каскада: при равной специфичности побеждает правило, записанное ниже. Если бы блок @media стоял над строкой .title { color: rgb(0, 0, 0); }, заголовок остался бы чёрным при любом окне. Поэтому условные правила пишут после основных.

@media спрашивает окно документа, в котором лежит стиль. У примера это рамка высотой 140 пикселей, у вашей страницы — вкладка.

Теперь задача, ради которой всё и затевается. Сетка шириной 240px, промежуток 10px, колонки 1fr 80px: широкая основная <main> и узкая боковая <aside>. В обе колонки положили одну и ту же карточку — картинку и полоску текста. Карточка собрана как flex-колонка, картинка над полоской, а правило @media ставит её в ряд, когда окно не уже 400 пикселей.

Сами направления карточек в статье не названы: они зависят от ширины вашей рамки. Прогноз: как лягут картинка и полоска на странице примера — одинаково в обеих карточках или по-разному?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Одно окно на всю страницу</title>
  <style>
  .page { display: grid; width: 240px; grid-template-columns: 1fr 80px; gap: 10px; }
  .card { display: flex; flex-direction: column; gap: 4px; }
  .pic { width: 30px; height: 30px; background: gold; }
  .text { width: 50px; height: 10px; background: skyblue; }
  @media (min-width: 400px) { .card { flex-direction: row; } }
</style>
</head>
<body>

<div class="page">
  <main><div class="card"><div class="pic"></div><div class="text"></div></div></main>
  <aside><div class="card"><div class="pic"></div><div class="text"></div></div></aside>
</div>
</body>
</html>

same(".card", "flex-direction");

Раньше это обходили арифметикой, и арифметика была хрупкой. Раз боковая колонка занимает, скажем, треть страницы, карточке в ней нужен свой порог, втрое больше, и отдельный класс вроде .card-in-sidebar со своим @media. То есть карточка обязана была знать, в какую колонку её положат. Её переносили в другое место или меняли ширину колонки — и пороги приходилось пересчитывать вручную, а забытый порог выглядел не как ошибка, а как «дизайнер так хотел».

@media знает ширину окна, но не ширину места: карточке в узкой колонке он отвечает то же, что карточке в широкой.

Контейнерный запрос спрашивает не окно, а коробку. Сначала предку объявляют, что он контейнер: container-type: inline-size. Слово inline здесь означает направление строки текста — в русском и английском это ширина. Потом условие пишут почти как в @media, только словом @container: @container (min-width: 120px) { … } читается как «ближайший контейнер не уже 120 пикселей». Проверяет его браузер для каждого элемента отдельно, и каждый спрашивает своего ближайшего предка-контейнера. Контейнерные запросы — Baseline widely с 14 августа 2025 года: пишите.

Страница та же, что в прошлом разделе. В стилях изменились две строки: колонки main и aside стали контейнерами, а @media (min-width: 400px) превратилось в @container (min-width: 120px). Прогноз — две строки: направления обеих карточек и x полоски текста в каждой. У картинки ширина 30px, промежуток в карточке 4px, а ширину колонки 1fr посчитайте, как в сетке: из ширины вычтите фиксированную колонку и промежуток.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>@container: условие про коробку</title>
  <style>
  .page { display: grid; width: 240px; grid-template-columns: 1fr 80px; gap: 10px; }
  main, aside { container-type: inline-size; }
  .card { display: flex; flex-direction: column; gap: 4px; }
  .pic { width: 30px; height: 30px; background: gold; }
  .text { width: 50px; height: 10px; background: skyblue; }
  @container (min-width: 120px) { .card { flex-direction: row; } }
</style>
</head>
<body>

<div class="page">
  <main><div class="card"><div class="pic"></div><div class="text"></div></div></main>
  <aside><div class="card"><div class="pic"></div><div class="text"></div></div></aside>
</div>
</body>
</html>

measure(".card", "flex-direction");
measure(".text", "x");

Запрос переключает то же свойство flex-direction, которое ставит ряд и колонку во flex. Нового способа раскладки он не приносит, а только выбирает, какие правила действуют. Всё, что внутри, — обычный CSS.

Адаптивный компонент смотрит на своё место, а не на экран. Одно правило карточки работает в любой колонке, куда её положат.

Контейнером может быть любой предок, и запрос спрашивает ближайшего. Сам элемент в их число не входит: правило для .card не спросит ширину самой .card, даже если объявить контейнером её. Поэтому контейнером делают обёртку — колонку, клетку сетки, слот, — а стили меняют внутри; это вы посчитаете в первой задаче. Если контейнеры вложены друг в друга, а спросить нужно не ближайший, контейнеру дают имя, container-name: sidebar, и условие называет его: @container sidebar (min-width: 200px).

В свежем CSS условие часто записывают сравнением: (width >= 120px) значит то же, что (min-width: 120px), а (width < 120px) — «уже 120». Такая запись работает и в @container, и в @media. В @media она Baseline widely с 27 сентября 2025 года.

У объявления контейнера есть цена, и о ней стоит знать до того, как что-то сломается. Если бы ширина контейнера зависела от содержимого, а содержимое через запрос — от ширины контейнера, браузер ходил бы по кругу: картинка шире — контейнер вырос — условие сработало — картинка уже — контейнер сжался. Поэтому container-type: inline-size велит считать ширину элемента так, будто содержимого у него нет.

Обычному блоку в потоке это не мешает: его ширину и так даёт родитель. Колонке сетки тоже: её ширину задаёт дорожка. А теперь flex-ряд шириной 240px, в нём элемент без ширины, а внутри — картинка 100px. Ниже такой же ряд, только элемент объявлен контейнером. Прогноз — две строки: ширины обоих элементов, потом их высоты.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Ширина контейнера приходит снаружи</title>
  <style>
  .row { display: flex; width: 240px; }
  .slot { background: skyblue; }
  .cq { container-type: inline-size; }
  .pic { width: 100px; height: 20px; background: gold; }
</style>
</head>
<body>

<div class="row"><div class="slot"><div class="pic"></div></div></div>
<div class="row"><div class="slot cq"><div class="pic"></div></div></div>
</body>
</html>

measure(".slot", "width");
measure(".slot", "height");

Так же сжимается в ноль любой контейнер, который брал ширину у содержимого: элемент flex-ряда без width и без flex: 1, элемент с display: inline-block, плавающий или абсолютно позиционированный без ширины. Лечится шириной снаружи: width, flex: 1, клетка сетки или обычный блок в потоке. Бывает и container-type: size — контейнер по обеим осям. Но и высота у него тогда не берётся из содержимого: без явной height она нулевая, поэтому нужен он редко.

Контейнер сжался в ноль, а содержимое торчит наружу — проверьте, откуда он брал ширину. От содержимого нельзя, дайте её снаружи.

Условие переключает правила скачком: до 120 пикселей одно, с 120 — другое. Размер шрифта удобнее менять плавно, и для этого есть единицы контейнера. 1cqi — один процент ширины ближайшего контейнера: в контейнере 300px значение 8cqi даст 24px. Буквы расшифровываются как container query inline. Похожая единица vw — процент ширины окна, и у неё та же беда, что у @media: во всех колонках страницы она одинаковая.

Плавному размеру нужны края. В колонке 50px от 8cqi остаются нечитаемые 4px, а в очень широкой выходят огромные буквы. Функция clamp(наименьшее, желаемое, наибольшее) берёт желаемое значение и зажимает его между краями. clamp() — Baseline widely с 28 января 2023 года, единицы контейнера пришли вместе с контейнерными запросами.

Три контейнера шириной 100, 200 и 250px, у заголовка font-size: clamp(12px, 8cqi, 18px). Заполните таблицу на бумаге.

Прогноз — три размера шрифта через запятую, в порядке разметки. Считать их нужно от ширины своего контейнера, а не от окна.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>cqi и clamp(): размер от ширины места</title>
  <style>
  .slot { container-type: inline-size; }
  .s1 { width: 100px; }
  .s2 { width: 200px; }
  .s3 { width: 250px; }
  .title { font-size: clamp(12px, 8cqi, 18px); margin: 0; }
</style>
</head>
<body>

<div class="slot s1"><p class="title">Кофе</p></div>
<div class="slot s2"><p class="title">Кофе</p></div>
<div class="slot s3"><p class="title">Кофе</p></div>
</body>
</html>

measure(".title", "font-size");

В настоящих стилях края обычно пишут в rem, например clamp(1rem, 8cqi, 1.5rem). Такой нижний край растёт вместе с размером шрифта, который человек выбрал в настройках браузера, а cqi об этой настройке ничего не знает. В примере края в пикселях: rem зависит от этой настройки, и ответ у разных читателей мог бы разойтись.

Желаемое — в cqi, края — в rem: шрифт следует за местом, но не становится мельче, чем просил человек.

Контейнерные запросы не отменили @media, а забрали у него компоненты. Вопросы про окно, устройство и человека по-прежнему задают через @media.

Порядок выбора получается такой. Сначала попробуйте обойтись без условий вовсе: сетка с auto-fill сама решает, сколько колонок влезет, а clamp() сам держит размер между краями. Компоненту, которому нужно перестроиться, дайте спросить свой контейнер. А окно спрашивают о раскладке всей страницы и о том, что знает только устройство: настройки человека, мышь или палец, экран или бумага. О настройке «меньше движения» подробно — в статье про @keyframes.

Условие про ширину окна проверяют на настоящей странице. Сохраните в файл страницу, в <style> которой стоит правило @media (max-width: 600px) { body { background: gold; } }, откройте её в браузере и сужайте окно: как только ширина станет 600 пикселей или меньше, фон пожелтеет. Если окно так узко не сжимается, включите в инструментах разработчика режим устройства, где ширину вписывают числом. В Chrome это кнопка Toggle device toolbar (Cmd+Shift+M в macOS, Ctrl+Shift+M в Windows), в Firefox — Responsive Design Mode (Cmd+Option+M и Ctrl+Shift+M).

На телефоне у того же файла есть ловушка из скелета страницы. Без строки <meta name="viewport" content="width=device-width, initial-scale=1"> мобильный браузер раскладывает страницу на ширину 980 пикселей, и для условия (max-width: 600px) окно телефона слишком широкое: фон не пожелтеет.

У @container есть и запросы по стилю: условие не про размер контейнера, а про значение его переменной CSS (переменные появятся дальше в главе). Такие запросы Baseline newly только с 19 мая 2026 года: знайте, что они есть, но пока не опирайтесь на них.