コンテナクエリユニット — cqw, cqi, cqb, cqmin, cqmax

コンテナクエリ長さユニット

CSSはビューポートユニット（vw、vh）に似ていますが、サイズ包含を持つ最も近いコンテナにスコープされた新しい長さユニットを導入しています。

ユニット一覧

ユニット	意味	同等
cqw	コンテナ幅の1%	コンテナ版vw
cqh	コンテナ高さの1%	コンテナ版vh
cqi	コンテナインラインサイズの1%	書字モード対応の幅
cqb	コンテナブロックサイズの1%	書字モード対応の高さ
cqmin	cqiとcqbの小さい方	コンテナ版vmin
cqmax	cqiとcqbの大きい方	コンテナ版vmax

フルイドタイポグラフィ

.text-container {
  container-type: inline-size;
}

.fluid-heading {
  font-size: clamp(1rem, 5cqi, 3rem);
}

.fluid-body {
  font-size: clamp(0.875rem, 2.5cqi, 1.25rem);
}

clamp()関数は最小値と最大値の境界を設定し、cqiがフルイドな中間値を提供します。テキストはコンテナ幅に合わせて滑らかにスケールします。

要件

コンテナクエリユニットは、container-type: inline-sizeまたはcontainer-type: sizeを持つ祖先がある要素で動作します。これらのユニットを使用するために明示的な@containerルールは必要ありません -- 連続的にスケールします。