レスポンシブデザインに欠かせない「vw」
スマホでもパソコンでも見れるようにデバイスのサイズによって最適化してくれるデザイン、レスポンシブデザイン。
昨今のサイトはほぼ「レスポンシブデザイン」で作られているが、この時製作者の多くが使用するであろう単位がある…
それが 「vw」!!
viewport widthは表示領域の横幅の相対値になるので、横幅が広がればvw指定したものも大きくなっていく便利な単位!
レイアウトを崩さずにデバイスの大きさに合わせて拡大・縮小してくれるのでよく使用する人も多いのではないだろうか?
しかし、この便利な「vw」をフォントサイズに使用すると予期せぬ悲劇が起こることも…
それが、フォントが拡大・縮小しすぎてしまう問題!
ブレイクポイントを細かく設定していけば、理想の大きさで止めることは可能だが、
多種多様のデバイスサイズを把握し、ブレイクポイントを指定することはもはや不可能…!

こんな感じで、せっかくのデザインが「フォントサイズ」が大きくなりすぎる為に改行され、予期せぬデザインになってしまう!
(フォントのせいで下の四角が凸凹に!)
そんな時はfont-sizeにclampを使おう!
clampとは「指定した範囲内にする」比較関数の一つ。
比較関数とはなんぞや?と貴方でも、「min」とか「max」とかは使用したことがあるのではなかろうか?
clampはまさしくそんなminとmaxよろしく最大値、最小値を決めることができる。
更に!このclampは最大値、最小値までの間は推奨値を維持してくれる!
どういうこっちゃ!となるが、要するに、下記の場合だと、

「border-on2 」というクラスにフォントサイズの指定をしているが、
「3remのフォントサイズを最大値30pxから最小値23pxの間で維持してね!」
ということになる!
先程のレイアウトに適用した結果はこちら!

フォントの拡大が制限されたため、改行が起こらず、下の四角枠のガタガタがなくなった!
便利すぎるぞ!clamp!!
基本これだけで「スマホからパソコンまでのフォントサイズ」をブレイクポイントごとにいちいち書かなくても対応可能!
今後のレスポンシブデザインに是非使用してみてね!