CSSの単位 vw, vh, vmin, vmax

タグ: | 投稿日: 投稿者:

こんにちは、kikuです。

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

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

<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 ビューポートの幅と高さのうち、値が大きい方に対する割合

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

  wv wh wmin wmax
chrome 20.0〜 20.0〜 20.0〜 26.0〜
FireFox 19.0〜 19.0〜 19.0〜 19.0〜
IE 9.0〜 9.0〜 9.0〜 11.0〜
Opera 15.0〜 15.0〜 15.0〜 15.0〜
Safari 6.0〜 6.0〜 6.0〜 6.1〜
Androidブラウザ 4.4〜 4.4〜 4.4〜 4.4〜
iOS Safari 6.0〜 6.0〜 6.1〜 7.0〜

Androidブラウザのところが敷居高いですね。
Android4.4未満のユーザを切り捨てるのはまだ早いかと思います。

というわけで、PCなら普通に使われるかもしれない、スマートフォン向けサイトでもそのうち普通に使われるかもしれない単位の紹介でした。

Share on Google+Tweet about this on TwitterShare on StumbleUponShare on Facebook

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>