Единицы контейнерных запросов: cqw и cqh
Задавайте размеры элементов относительно контейнера запроса с помощью cqw, cqh и связанных с ними контейнерных единиц.
«Единицы контейнерных запросов: cqw и cqh» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Единицы контейнерных запросов
CSS предоставляет единицы относительно контейнера, которые задают размеры как проценты от измерений контейнера, к которому применяется запрос, — подобно единицам области просмотра (vw/vh), но относительно контейнера компонента.
cqw — ширина контейнерного запроса
1cqw = 1% от строчного размера контейнера (ширины при горизонтальном направлении письма). Масштабируйте типографику и интервалы относительно контейнера компонента.
<div class="card-wrapper"><h3 class="card-title">Fluid Card Title</h3></div>
cqh — высота контейнерного запроса
1cqh = 1% от блочного размера контейнера (высоты). Требуется container-type: size, а не только inline-size.
<div class="hero-wrapper"><div class="hero-card">Hero Text</div></div>
cqi — строчный размер контейнера
cqi — это псевдоним cqw при горизонтальном направлении письма; он обозначает именно строчное измерение и не привязан к горизонтальному направлению.
cqb — блочный размер контейнера
cqb похож на cqh, но определяется направлением измерения: он обозначает блочный размер независимо от режима письма.
cqmin и cqmax
cqmin = 1% от меньшего измерения контейнера. cqmax = 1% от большего. Это аналогично vmin/vmax.
<div class="icon-wrapper"><div class="icon"></div></div>
Плавная типографика в компонентах
Единицы контейнера позволяют создавать действительно плавную типографику в пределах компонента:
<div class="card-wrapper"><h3 class="card-title">Fluid Title</h3></div>
Когда использовать единицы контейнера
Используйте единицы контейнера, когда:
- текст компонента должен масштабироваться вместе с шириной компонента
- интервалы внутри компонента должны быть пропорциональны его размеру
- Вам нужен плавный дизайн на уровне компонента, независимый от области просмотра
Единицы контейнера и единицы области просмотра
Ключевое различие: единицы области просмотра (vw, vh) обращаются к области просмотра браузера. Единицы контейнера (cqw, cqh) обращаются к ближайшему контейнеру запроса. Благодаря этому компоненты действительно можно переносить: один и тот же компонент будет пропорционально выглядеть и в боковой панели шириной 300px, и в основной области шириной 900px.
Обязательное условие: container-type
Единицы контейнера работают только при наличии предка с container-type. Без него единица контейнерного запроса использует малую единицу области просмотра (svw/svh) как запасной вариант.
Практический шаблон
Полный компонент с использованием единиц контейнера:
<div class="feature">
<h2 class="feature-title">Feature Name</h2>
<p class="feature-text">A short description of this feature that scales with the container.</p>
</div>
Быстрая проверка
Что выдаёт font-size: 5cqw в компоненте, расположенном внутри контейнера шириной 400px?
Повторение
Единицы контейнерных запросов (cqw, cqh, cqi, cqb, cqmin, cqmax) задают размеры относительно контейнера запроса, а не области просмотра. Используйте cqw для плавной типографики, масштабируемой вместе с шириной компонента. Для работы им требуется предок с container-type; без него они используют единицы области просмотра.
Часто задаваемые вопросы
Урок «Единицы контейнерных запросов: cqw и cqh» бесплатный?
Да — полный текст урока «Единицы контейнерных запросов: cqw и cqh» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Единицы контейнерных запросов: cqw и cqh»?
Задавайте размеры элементов относительно контейнера запроса с помощью cqw, cqh и связанных с ними контейнерных единиц. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Единицы контейнерных запросов: cqw и cqh»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- container-type и container-name
- Правила @container и контрольные точки
- Единицы контейнерных запросов: cqw и cqh
- Контейнерные запросы и медиазапросы