CSS Clamp ジェネレーター
最小サイズ・最大サイズ・ビューポートのブレークポイントを入力すると、2つの値の間をスムーズにスケールするCSS clamp()式を即時生成します。
最小・最大サイズと2つのビューポート幅から、線形に変化するCSS clamp()式を計算します。
CSS clamp()を作る方法
- 最小サイズと最大サイズをpxで入力します。
- 最小・最大ビューポート幅を入力し、pxまたはremを選びます。
- 生成されたclamp(min, fluid, max)式をコピーします。
計算方法
2点間の線形傾きを計算し、vw項と切片を組み合わせます。
rem出力ではサイズと切片をroot sizeで割りますが、傾きはvw項のままです。
プライバシーと制限
計算はブラウザ内で行われます。2つの端点の間を線形補間するだけで、実際のレイアウトやcomputed styleは検査しません。
CSS clamp FAQ
clamp()とは何ですか？
最小値、流動的な推奨値、最大値を指定するCSS関数です。
remで出力できますか？
はい。root sizeを設定してremを選択します。
最小ビューポートは小さい必要がありますか？
はい。増加する範囲が必要です。
最小サイズが最大より大きくてもよいですか？
いいえ。エラーになります。
CSSファイルを読み込みますか？
いいえ。入力した数値だけを計算します。