Loading…
最小・最大サイズとビューポート幅から、流体タイポグラフィ向けの clamp() を生成します。
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
ビューポート幅が最小値以下のときは最小サイズ、最大値以上のときは最大サイズになり、その間はなめらかに変化します。生成された値を font-size などにそのまま指定できます。
clamp(最小値, 推奨値, 最大値)の3つの値をとり、ビューポート幅に応じて値を伸縮させつつ、最小・最大の範囲内に収める関数です。フルードタイポグラフィ(流動的な文字サイズ)の実現に使われます。
最小・最大のフォントサイズと、対象とするビューポート幅を入力すると、font-sizeなどに指定できるclamp()のコードを生成します。出力されたコードをそのままCSSに貼り付けてご利用ください。
clamp()はモダンブラウザで広くサポートされており、現在の主要ブラウザで安心してご利用いただけます。