二俣です。ちょっとニッチな内容かもしれないですが、備忘録を兼ねて。
よくあるfont-sizeの指定方法
よく見かけたり、使ったりしているfont-sizeの単位は、だいたい下記のような感じかと思います。
- px
- 絶対指定。pxで指定する。
- em
- 相対指定。親要素のフォントサイズの何倍か。
- %
- 相対指定。親要素のフォントサイズの何パーセントか。
- rem
- 相対指定。html要素のフォントサイズの何倍か。
.txt1{
font-size: 10px;
}
.txt2{
font-size: 1.6em;
}
.txt3{
font-size: 160%;
}
.txt4{
font-size: 1.6rem;
}
念願の、ie8のサポートが終了したこともあり（参考：https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/）、実案件でremを使う機会も増えているのではないでしょうか？
たいていの場合、上記を適宜使い分けることで事足りると思います。僕は事足りていました。
が・・・
事足りなかった
リキッドで作成していて、画像の上にテキストを載せるようなレイアウトがありました。
上記のようなpxやremなどのfont-sizeの指定方法では、基本的にテキストのサイズは一定です。画像はwidth: 100%;のように、ブラウザ（親要素）の幅に合わせて拡大縮小するのですが、その画像の上に乗せたテキストはテキストのサイズが一定になってしまうため、画像との比率が崩れてしまいます。
つまり要件は、
「ウィンドウ幅に合わせて、テキストのサイズもいい感じに可変させたい」
ということですね。
パッと思いつく対応方法としては
- デザインの変更をお願いする。
- テキストごと画像にしてしまう。
- jsでリサイズイベント取得してごにょごにょする。
くらいですが、上記では負けた気がするのでベストな対応ではないと思い、見つけたのが「vw」という指定方法でした。
vwとは
vwはビューポート-パーセンテージという相対単位の1つで、「ビューポートの幅の1/100」という指定です。
viewport widthの略ですね。
ビューポート-パーセンテージは、ビューポートの幅や高さを基準に計算するもので、他にも、vh、vmin、vmaxがあります。
（参考：https://developer.mozilla.org/ja/docs/Web/CSS/Length）
ざっと書くと
- vw
- 相対指定。ビューポートの幅の何パーセントか。
- vh
- 相対指定。ビューポートの高さの何パーセントか。
- vmin
- 相対指定。ビューポートの「幅か高さの短い方」の何パーセントか。
- vmax
- 相対指定。ビューポートの「幅か高さの長い方」の何パーセントか。
.txt5{
font-size: 3vw;
}
.txt6{
font-size: 4vh;
}
.txt7{
font-size: 5vmin;
}
.txt8{
font-size: 6vmax;
}
ということになります。
つまりどうなるのか
こうなります。
サンプルページ（※ウィンドウ幅をぐりぐりしてみてください。）
「ウィンドウ幅に合わせて、テキストのサイズもいい感じに可変させたい」
こちら、解決できました。
remなどと同様、相対指定なのですが、参照元となるのが親要素やhtml要素といったcssで定義されたものではなく、ブラウザの幅になるのでリサイズされたときにテキストのサイズもいい感じに反映してくれます。
注意点
「ブラウザの幅に対して」なので、最小幅以下と最大幅以上ではメディアクエリなどでfont-sizeをremなどの単位に変更したほうがよさそうです。ブラウザ幅を広げれば広げる程、テキストは大きくなり、狭めれば狭める程、テキストは小さくなります。（というか表示がおかしくなります）
あとは、お察しの通りieです。vmax、vminを使う際にはブラウザのサポート範囲に注意です。
参考：http://caniuse.com/#feat=viewport-units
まとめ
font-size以外にも、もちろんwidth: 10vw;といった指定も可能です。むしろfont-sizeにvw使う機会が少なそうですが・・・いろいろなコーディングの引き出しを持っておくと、いざという時に助かるかもしれないですね。
参考サイトまとめ
https://developer.mozilla.org/ja/docs/Web/CSS/Length
http://dev.classmethod.jp/ria/html5/css-length-viewport/
http://caniuse.com/#feat=viewport-units