CSS clamp() 計算ツール
小さいビューポートでのサイズと、大きいビューポートでのサイズを指定してください。その間をなめらかに動く clamp() が得られます。単位は rem なので、読み手のブラウザの文字サイズを尊重したままです。
ビューポート—
計算されたサイズ—
いろはにほへと
タイプスケール
px ではなく rem を使う理由
px で書いたサイズは、読み手がブラウザで選んだ文字サイズを無視します。同じ指定を rem にすれば、それに合わせて拡大縮小されます。既定を20pxにしている人には、あなたが固定した16ではなく大きな文字が届きます。ビューポートの項はいずれにせよ vw のままです。あれは画面幅の話で、読み手の好みの話ではありません。
よくある質問
真ん中の項は何をしている？
あなたが指定した2点を通る直線です。切片に、vw で表した傾きを足したもの。小さいビューポートより下では最小値に、大きいほうより上では最大値に張り付きます。
最大値を最小値より小さくできる？
できますし、clamp() は問題なく働きます。ただ画面が大きくなるほど文字が小さくなるので、まず望まれません。そうなったときはページが知らせます。
そちらのサーバーに何か送られますか？
いいえ。ブラウザの中での計算だけで、入力した内容がページの外に出ることはありません。
GO AIチームが作りました。 無料ツール一覧