CSS clamp() ジェネレーター
最小/最大サイズとビューポート幅から、流動的なCSS clamp() 値を生成します。
出力
最小サイズと最大サイズ、それらが適用されるビューポート範囲を入力すると、流動的でレスポンシブなタイポグラフィや余白に使えるCSS clamp() 式がすぐに手に入ります。
使い方
- 最小サイズと最大サイズをピクセルで入力します。
- サイズを適用する最小と最大のビューポート幅を入力します。
- 生成された clamp() 宣言をコピーします。必要に応じてCSSプロパティ名を変更できます。
よくある質問
- 流動的な値はどのように計算されますか？
- ビューポート範囲にわたる最小サイズと最大サイズの間の線形の傾きを計算し、clamp() 内の rem + vw の式として表します。
- なぜ出力に rem と vw を使うのですか？
- rem は基準サイズをユーザーのフォント設定に対して相対的に保ち、vw はビューポート幅に応じて滑らかにスケールさせます。
- 最大ビューポートが最小ビューポートより小さい場合はどうなりますか？
- 最大ビューポート幅を最小より大きくするよう促す検証メッセージが表示されます。