可変フォント用 clamp() 計算機
最小サイズ、最大サイズ、そしてどの画面幅の間で拡大するかを指定してください。直線の式を計算し、そのまま使える clamp() を出力します。
使い方clamp() で可変サイズに
吾輩は猫である。名前はまだ無い。
利用できる言語: 
広告
可変フォント用 clamp() 計算機: 用途
clamp() を使うと、複数のメディアクエリを書かなくても、画面幅に合わせてテキストが大きくなります。スマホでは小さく、パソコンでは大きく、その間は滑らかに変化します。
計算機は、指定した画面幅での最小サイズと最大サイズの間の直線を計算し、ユーザーのフォント設定を尊重するrem単位の値を返します。一般的な画面幅ごとのサイズを表示し、最大値が最小値の2.5倍を超えると警告します。これを超えると、WCAG 1.4.4が求める200%ズームが機能しなくなる可能性があります。
使い方
- 最小サイズと最大サイズをpxで入力します。
- どの画面幅の間で拡大するかを選びます。
- できあがった clamp() をコピーします。
使うタイミング
- スマホとパソコンに合わせて調整される見出し。
- セクション間の可変の余白。
- メディアクエリなしのタイポグラフィスケール。
よくある質問
clamp() はどのように動作しますか？
clamp(最小値, 推奨値, 最大値) は、推奨値が上下限の間にある間は推奨値を使います。推奨値は直線で、rem値にvwの割合を足したものです。画面幅とともに大きくなり、スマホでは最小値、パソコンでは最大値になります。
pxではなくremを使うのはなぜですか？
remは、ユーザーが選んだフォントサイズに従います。pxでは、読みやすさのために標準フォントを大きくした方には違いが出ません。
ズームの警告とは何ですか？
WCAGでは、テキストを200%まで拡大できることが求められます。vwの部分はズームでは大きくならないため、最大値が最小値よりかなり大きいと、この拡大ができなくなることがあります。安全な目安は、最大値を最小値の2.5倍以内に収めることです。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。