clamp()関数には最小値、推奨値、最大値の3つの値を設定することができ、その中の条件に合うものが適用されます。
フォントサイズや横幅をスマートフォン用にいちいち設定しなくても、幅に合わせて最適なサイズにしてくれます。
clamp(最小値,推奨値,最大値)デモはこちら
デモの上のテキストはclamp()関数を使用し、下のテキストはメディアクエリで調整しています。
このように、clamp()関数は画面幅が可変しても比率が維持できているのなら崩れる事はありません。
比率を維持するために推奨値の計算が必要になります。
最小のフォントサイズ ÷ 最小のフォントサイズの画面サイズ ✕ 100 = vwの値※vwとは
vw は「 Viewport Width 」の略で、ビューポートの幅の割合を意味します。
例えば幅が1000pxの場合、 10vwと書くと100pxとなります。
例として、400px［最小のウィンドウサイズ］で、フォントサイズを20pxにしたい場合
20 ÷ 400 x 100 = 5vwとなり、推奨値は5vwに設定します。
5vwに設定すると、他のウィンドウサイズではどうなるかというと、
［例］clamp(20px,5vw,80px)の設定の場合
1200pxのウィンドウサイズでのフォントサイズは、
1200 × 5 ÷ 100=60pxになりますね。
例でいえば、最大値が80pxに設定されているので、1200pxのウィンドウサイズでは推奨値が適用され60pxになります。
基本は推奨値が適用されますが、最小値もしくは最大値に達したらその値になります。
計算が少し面倒くさい方でも安心です。最大値と最初値を設定すれば、コードを生成してくれるアプリもあります。
今回はclamp()関数を使ったテキストの設定でしたが、clamp()関数はwidhプロパティにも使用できるため幅を設定する際にも便利です。ぜひ、活用してみてください。
