CSS clamp() 計算機

使い方

1. 最小フォントサイズをピクセルで入力し、最大フォントサイズをピクセルで入力します。
2. これらのフォントサイズが適用される最小ビューポート幅と最大ビューポート幅を入力します。
3. プレビュースライダーをドラッグして、異なるビューポート幅でフォントがどのようにスケーリングされるかをシミュレートし、ライブピクセル値を読みます。
4. 生成された clamp() 式をコピーして、CSS に貼り付けます。

例

• 最小フォント 16px、最大フォント 32px、最小ビューポート 320px、最大ビューポート 1280px は、clamp(16px, 1.667vw + 10.667px, 32px) を生成します。
• プレビュービューポート 800px で、ライブディスプレイはおおよそ 23px を表示し、2 つの極値間での平滑なスケーリングを確認します。