CSS CONTAINER UNITS

vw と cqw は、見ている幅が違う

コンポーネント内のサイズなら、画面幅ではなくカード自身の幅を基準にしたい。 cqw なら、この例では clamp なしでも自然に追従できます。

Try resizing カード幅を変えて、基準の違いを見る

Card width

viewport unit vw + clamp: 画面幅が基準

vw + clamp

上限を付けても画面基準

clamp で大きくなりすぎるのは防げます。ただし、見ている幅はカードではなく画面幅のままです。

View details

container unit cqw: カード幅が基準

cqw

1cqw はコンテナ幅の1%。カードの幅に合わせて、文字サイズや余白をコンポーネント内で調整できます。

View details

.title {
  font-size: clamp(28px, 4vw, 52px);
}

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

.title {
  font-size: 7cqw;
}

Point

vw は clamp を足しても画面基準。cqw はコンポーネント基準なので、この例では clamp なしでもカード幅に追従できます。