font-size: clamp( 最小値、推奨値、最大値 )

最小値は下限。最大値は上限。推奨値は最小値と最大値の間で使用される値。

viewport を基準にした推奨値の計算

設定例

  • フォントサイズ最小値 1rem(16px)
  • フォントサイズ最大値 1.25rem(20px)
  • 最小ビューポート 20rem(320px)
  • 最大ビューポート 48rem(768px)

ウィンドウ幅が 320px 以下の場合は フォントサイズ 1rem(16px)。ウィンドウ幅が768以上の場合1.25rem。321px – 767px の間は1rem – 1.25rem 間で変化する。

計算式

参考にしたページLinearly Scale font-size with CSS clamp() Based on the Viewport

slope = (最大フォントサイズ – 最小フォントサイズ) / (最大viewport – 最小viewport)
yAxisIntersection = -最小viewport * slope + 最小フォントサイズ
preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]

↓↓↓これを当てはめると…

0.008928571428571 = (1.25rem – 1rem) / (48rem – 20rem)
0.8214285714285714 = -20rem * 0.008928571428571 + 1rem
推奨値 = 0.8214285714285714rem + 0.8928571428571vw

clampの記述 ※小数点第4位以下丸め

font-size: clamp(1rem, 0.8214rem + 0.8929vw, 1.25rem);

….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….….こんな計算やってられるかよーーーーーっっっ!!!

下記オンラインの自動計算ツールに頼りましょう。

※Fluid responsive font size calculatorの方は calc は不要と思われます。(そのまま残しても不具合はありませんが…)

コメントを残す

メールアドレスが公開されることはありません。