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