Frontend-content

📐 px → cqw/cqh конвертер

📦 Родитель (контейнер)container-type: inline-size
Ширина:px
🧩 Потомок (элемент)width: Ncqw
Ширина:px
📋 нажмите чтобы скопировать
(171px / 375px) × 100 = 45.6cqw
1cqw = 1% от ширины родителя

px в cqw/cqh конвертер — переводите пиксели в Container Query Units

Что такое cqw и cqh?

cqw (Container Query Width) — это современная единица измерения в CSS, которая равна 1% от ширины родительского контейнера. Аналогично, cqh (Container Query Height) равна 1% от высоты родительского контейнера. Эти единицы появились в CSS для работы с Container Queries — мощным инструментом адаптивной верстки, который позволяет элементам подстраиваться под размер их контейнера, а не только под размер окна браузера.

Зачем нужен конвертер px в cqw/cqh?

При разработке адаптивных компонентов часто возникает необходимость перевести фиксированные размеры в пикселях в относительные единицы cqw или cqh. Наш конвертер позволяет сделать это мгновенно:

  • Введите ширину или высоту родительского контейнера в пикселях
  • Укажите размер элемента, который нужно конвертировать
  • Мгновенно получите значение в cqw или cqh
  • Скопируйте результат одним кликом

Как использовать cqw и cqh в CSS?

Вот простой пример использования Container Queries:

/* Родительский контейнер */
.parent {
    container-type: inline-size; /* для cqw */
    /* или */
    container-type: size; /* для cqh */
}

/* Дочерний элемент */
.child {
    width: 45.6cqw; /* 45.6% от ширины родителя */
    height: 21cqh;  /* 21% от высоты родителя */
}

Преимущества использования Container Query Units

🎯 Адаптивность

Элементы подстраиваются под размер контейнера, а не окна браузера

🔄 Переиспользование

Один и тот же компонент может работать в разных контекстах

📦 Модульность

Компоненты становятся независимыми от глобального контекста

⚡ Производительность

Container Queries оптимизированы для эффективного рендеринга

Поддержка браузеров

Container Queries и единицы cqw/cqh поддерживаются во всех современных браузерах:

  • Chrome/Edge 105+ ✅
  • Firefox 110+ ✅
  • Safari 16+ ✅
  • Opera 91+ ✅

Примечание: Для старых браузеров рекомендуется использовать прогрессивное улучшение или полифиллы.

Часто задаваемые вопросы (FAQ)

Чем cqw отличается от процентов?

Проценты (%) всегда считаются от ширины родительского элемента, а cqw работает в контексте Container Queries и может использоваться вместе с @container правилами для создания более гибких адаптивных интерфейсов.

Можно ли использовать cqw и cqh вместе?

Да, конечно! Вы можете комбинировать эти единицы в одном компоненте. Например, ширина может быть в cqw, а высота в cqh для создания пропорционально масштабируемых блоков.

Как перевести cqw обратно в пиксели?

Чтобы перевести cqw в пиксели, умножьте значение cqw на ширину контейнера и разделите на 100. Наш конвертер поддерживает и обратное преобразование.

Дополнительные материалы