CSSの単位 vw, vh, vmin, vmax

こんにちは、kikuです。

最近知ったCSSの単位について記載していきます。
vw, vh, vmin, vmax, この４つです。

よくレスポンシブデザインで使うのは%(パーセント)ですかね。

<style>
div {
  width: 50%;
}
img {
  width: 50%;
}
</style>
<div>
  <img src="img/hoge.jpg" />
</div>

これだとimgは親のdivのwidthに対して50%のサイズで表示します。
つまりimgのサイズは画面の横幅の25%で表示されますね。

続いてwvはこんな感じです。

<style>
div {
  width: 50%;
}
img {
  width: 50wv;
}
</style>
<div>
  <img src="img/hoge.jpg" />
</div>

これだとimgは親のdivのwidthに影響されません。
100wv=ビューポートのサイズとなってます。
つまりimgのサイズは50wvなのでビューポートの横幅の50%で表示されますね。

他のも同じようにビューポートに対する割合となっています。

wv	ビューポートの幅に対する割合
wh	ビューポートの高さに対する割合
vmin	ビューポートの幅と高さのうち、値が小さい方に対する割合
vmax	ビューポートの幅と高さのうち、値が大きい方に対する割合

ちょうど使いたい場面があったのですが、ブラウザの対応バージョンの関係で断念しました。。。。
対応バージョンはこんな感じ。