CSS clamp() ジェネレーター

この計算ツールについて

このツールは、流動的なタイポグラフィのためのレスポンシブなCSSのclamp()関数——clamp(min, preferred, max)——を生成します。preferredの値は、フォントサイズを最小と最大のビューポート幅の間で滑らかに拡大縮小させるよう計算されたvwベースの式で、選んだ上限・下限を超えて伸び縮みしなくなります。

フロントエンドデベロッパーは、見出しや本文のテキストサイズを変えるためだけに複数のメディアクエリのブレークポイントを書く必要を避け、1つのCSSルールで流動的に拡大縮小させるためにこれを用います。最小・最大のフォントサイズとビューポートの範囲を入力すると、そのまま貼り付けられるclamp()ルールが得られます。