CSS Container Query 単位 (cqw, cqh) を使ったコンテナ相関フォントサイズ設定

CSS Frontend Responsive
結論

親要素に container-type を与え、子要素のサイズ計算に cqw（コンテナ幅の1%）単位を使用します。

/* 結論：cqw 単位を使用したレスポンシブ見出し */
.card-wrapper {
  container-type: inline-size;
}

.card-title {
  /* 親コンテナ幅の 5% の大きさ。最小 1.2rem〜最大 2.5rem */
  font-size: clamp(1.2rem, 5cqw, 2.5rem);
}

実装手順

  1. サイズ計算の基準にしたい親要素へ container-type: inline-size を指定する
  2. 子要素のフォントサイズやパディングに 1cqw （＝親コンテナ幅の 1%）単位を用いた clamp() 関数を記述する
  3. コンテナの幅を伸縮させ、ビューポート依存（vw）なしで滑らかにフォントサイズが伸縮することを確認する