h2やh3なんかのタイトルにあてるフォントサイズを、pxやremの指定でもいいけれど
絶対1行におさめたいなーとか、サイズをレスポンシブにしたい事情がある場合
vwの指定が便利です。
たとえばこんなメッセージを表示させたいとします。
きょうはさむいですね
これはサイズにvwを使っているので、画面の横幅に合わせてフォントサイズを縮小・拡大してくれます。
コードはこんな感じです。
<div class="message"> きょうはさむいですね </div>
cssに、vwを指定するとこんな感じ。
.message {
text-align: center;
font-size: 7vw;
}
@media screen and (min-width: 1080px) {
.message {
font-size: 60px;
}
}vwは画面のビューポート幅に依存しているので、画面幅が大きくなるとフォントサイズも際限なく大きくなってしまいます。
なのでメディアクエリで最大値は指定しておくと良いかと！
追記：
すごく小さい幅のデバイスの場合小さくなりすぎる問題があるので、
最小値は固定するほうが良さそうです。
また、Androidの古いバージョンのvw非対応対策として、
font-size: ○○px; //固定値も！ font-size: ○○vw;
のようにpx固定値も併記したほうが良いようです。
