レスポンシブスペーシングトークン — ビューポート適応型スペーシング値

デザイントークンによるレスポンシブスペーシング

静的なスペーシング値（16pxなど）はデスクトップでは機能しますが、モバイルでは余裕がありすぎ、大画面では狭すぎる場合があります。レスポンシブスペーシングトークンは、ビューポートに値を適応させることでこの問題を解決します。

CSS clamp()アプローチ

モダンなアプローチはclamp()を使用してスムーズにスケールする流動的なスペーシングを作成します：

:root {
  --spacing-sm: clamp(0.5rem, 1vw, 0.75rem);
  --spacing-md: clamp(0.75rem, 2vw, 1.5rem);
  --spacing-lg: clamp(1rem, 3vw, 2rem);
  --spacing-xl: clamp(1.5rem, 4vw, 3rem);
}

メディアクエリオーバーライドパターン

より細かい制御のために、特定のブレークポイントでトークン値をオーバーライドします。

コンテナクエリトークン

コンテナクエリを使用すると、スペーシングをビューポートではなくコンポーネントのコンテナに適応させることができます。