viewport units へさらなる理解

この記事は主に以下の記事を参考にしています。

Viewport vs Percentage Units | bitsofcodebitsofco.de

viewportとは？

viewportを基本にした相対的な単位です。
vw, vh, vmin, vmax の4つがあります。

名前	単位	意味
viewport width	vw	ブラウザのviewportの横幅の1/100
viewport height	vh	ブラウザのviewportの縦長の1/100
minimum viewport	vmin	ブラウザのviewportの横幅と縦長のうち、小さい方の1/100
max viewport	vmax	ブラウザのviewportの横幅と縦長のうち、大きい方の1/100

ブラウザサポートはこんなかんじ

ブラウザ	対応状況	詳細、対処方法
IE8	×	使えないよ！
IE9	△	vminはvmと記述すること
IE10〜Edge	△	vmaxのサポートなし
Opera mini	×	使えないよ！
iOS 7.1 Safari	△	使えるけどバグがでやすい、これを使え

詳細はこれを参考に
Can I use… Support tables for HTML5, CSS3, etc

vwについて

そもそも、widthの%指定と何が違うのかというところですが、
%はhtml,bodyの幅を基軸に指し、
viewportはスクロールバーまでを含めた画面全体の幅を指します。

なので、もしも

.foo {
  width: 100vh;
}

と指定した場合には、画面をはみ出し横スクロールが出てしまうということです。
※最近のブラウザはスクロールバーが隠れていることが多いけど、その場合でもです。
このような微妙な差異が出てしまうため、画面いっぱいの横幅を指定する際は%の方が思う通りのスタイルになってくれます。
ただ、%は親要素の幅から計算されるため、HTMLのどの部分にある要素なのかという点を強く意識しなければいけないのもまたひとつの弱点です。
幅計算に微妙な差異はあるのものの、HTMLのどの部分にある要素であるかを意識せずとも画面幅からある程度の大きさを指定したいという際にはvwは非常にわかりやすい単位でもあります。

vhについて

vhとheightの%を比較すると、圧倒的にvhのほうが使い勝手が良いです。
というのも、heightの%指定は親要素にheightが指定されていない限り有効とならないからです。
このために、htmlといった文書のルート要素にあたるものにheight: 100%;としたり、親要素のheightをいちいち指定したりする必要があり、heightの%は非常に扱いにくい単位でした。
その点、vhはどこにあるどんな要素でもviewportから計算された高さを適用してくれます。
画面の高さいっぱいの要素を作りたいとしたら、

.foo {
  height: 100vh;
}

これだけでオッケー。
これで、どんな高さのブラウザでも必ず画面いっぱいの高さにフィットし、しかも画面のリサイズにも対応してくれます。最高！

応用編

基本的なことはわかったと思うので、これをどのような例に使えるのかを紹介します。

画面いっぱいの要素を並べたページ

.foo {
  width: 100%;
  height: 100vh;
}

たったのこれだけで要素が完璧に幅・高さ共にフィットしたスライドっぽいデザインにできるよ。

画像の最大幅・最大長をコントロールする

img{
  max-width: 100%;
  max-height: 90vh;
}

max-width や max-height に適用することで、必ず画面内に画像を収めたいときなどに便利。

横縦比固定のブロックを作る

.foo {
  width: 10vw;
  height: 10vw;
}

width, height ともに同じ viewport units による指定をすることで、横縦比を固定させたブロックを作ることができます。