vw

■VWとは

vwは、ビューポートの幅に応じてサイズが変化するピクセル単位で、ウェブデザインでリキッドなレイアウトを実現するのに役立ちます。例えば、画面幅に応じてフォントサイズを自動的に調整したい場合に有用です。

■スマホの画面幅は、モデルによって全然ことなる
スマホの時に、固定サイズのフォントでいいのか？

1vwはビューポートの幅の1%に相当し、親要素ではなくビューポートを基準とした相対値を表します。つまり、ビューポートが100ピクセルなら1vwは1ピクセルになります。この特性により、画面幅に合わせて要素のサイズを拡縮させることができます。そのため、小さいデバイスでは小さく、大きいデバイスでは大きく表示されるようにする場合に適しています。

remはルートのフォントサイズを基準にしてサイズを変更しますが、vwはビューポートの幅を基準とするため、レスポンシブ対応する際にはルートのフォントサイズを変更する必要がありません。

fontの単位には以下があります。

320pxの横幅を基準にfont-sizeを指定した例

外部リンク：画面サイズに応じてfont-sizeを「ちょっとずつ」拡縮させる 参考：OLDOFFICE&CO　Update：2022-07-31