レスポンシブ デザイン

ウェブ機能: コンテナクエリ（サイズ） 小、大、動的ビューポート単位 aspect-ratio min()、max()、clamp() ビューポート単位

全般的なベスト プラクティス

  • @container クエリを使用して、ビューポートではなく親コンテナのサイズに適応するコンポーネント駆動型のレスポンシブ レイアウトを作成します。詳しくは、サイズに応じたスタイル設定をご覧ください。
  • vh / vw の代わりに動的ビューポート単位（dvh、dvw）を使用して、モバイル ブラウザの UI 要素（アドレスバーなど）が表示または非表示になったときにレイアウトが崩れないようにします。
  • メディア要素（<img> や <video> など）に aspect-ratio を使用して、読み込み中にスペースを予約し、Cumulative Layout Shift（CLS）を防ぎます。

レスポンシブ UI の背後にあるレイアウト メカニズム（Flexbox、グリッド、コンテナクエリ ユニット、ビューポート ユニット）については、CSS レイアウトとレスポンシブ デザインをご覧ください。

レスポンシブ タイポグラフィ

  • 推奨: clamp() でビューポート相対単位とフォント相対単位を組み合わせて、ビューポート サイズに合わせて拡大縮小するフォントサイズを、目的の範囲内に収まるようにします。例: clamp(2rem, 1rem + 5vw, 4rem)。ビューポート相対単位とフォント相対単位の比率を調整して、フォントサイズの変更速度を制御します。
  • clamp() を指定せずに vw のみを font-size に使用しないでください。極端な画面サイズでテキストが小さすぎたり大きすぎたりする可能性があります。

ビューポートではなくコンテナに合わせてタイプと間隔をスケーリングするには、流動的なスケーリングをご覧ください。