幅の狭いスマートフォンからウルトラワイドなデスクトップモニターまで、滑らかに伸縮する適応性の高い余白システムを構築できます。
余白の境界値を入力
モバイル用の最小パディングとデスクトップ用の最大パディングをピクセル単位(px)で入力します。
画面サイズのしきい値を設定
余白が変化し始める画面幅と変化が終わる画面幅のしきい値を設定します。
余白ルールに適用
計算された値をコピーして、`padding`、`margin`、または`gap`プロパティに貼り付けます。
デザイントークン全体で繰り返される`@media`クエリの記述を、1行の宣言的なclamp()ルールに置き換えます。
セクションのパディングが使いやすさの最小基準を下回ったり、レイアウトの限界を超えて広がりすぎたりするのを防ぎます。
はい、clamp()はgap、margin、padding、widthプロパティでも同様に機能します。
プロパティは定義された最大値に固定され、それ以上拡大することはありません。