■VWとは
vwは、ビューポートの幅に応じてサイズが変化するピクセル単位で、ウェブデザインでリキッドなレイアウトを実現するのに役立ちます。例えば、画面幅に応じてフォントサイズを自動的に調整したい場合に有用です。
■スマホの画面幅は、モデルによって全然ことなる
スマホの時に、固定サイズのフォントでいいのか？
1vwはビューポートの幅の1%に相当し、親要素ではなくビューポートを基準とした相対値を表します。つまり、ビューポートが100ピクセルなら1vwは1ピクセルになります。この特性により、画面幅に合わせて要素のサイズを拡縮させることができます。そのため、小さいデバイスでは小さく、大きいデバイスでは大きく表示されるようにする場合に適しています。
remはルートのフォントサイズを基準にしてサイズを変更しますが、vwはビューポートの幅を基準とするため、レスポンシブ対応する際にはルートのフォントサイズを変更する必要がありません。
fontの単位には以下があります。
| 単位名 | 説明 |
|---|---|
| vw | ビューポートの幅の 1/100（100vwで横幅いっぱい） |
| vh | ビューポートの高さの 1/100（100vhで縦幅いっぱい） |
| vmax | ビューポートの高さか幅の大きいほうの 1/100 |
| vmin | ビューポートの高さか幅の小さいほうの 1/100 |
320pxの横幅を基準にfont-sizeを指定した例
| px | vw |
|---|---|
| 10px | 3.125vw |
| 11px | 3.4375vw |
| 12px | 3.75vw |
| 13px | 4.0625vw |
| 14px | 4.375vw |
| 15px | 4.6875vw |
| 16px | 5vw |
外部リンク：画面サイズに応じてfont-sizeを「ちょっとずつ」拡縮させる 参考：OLDOFFICE&CO Update：2022-07-31