CSSのvwやvhを使ってみる

vwやvh,vmin,vmaxといった単位を使ってみます。

対応ブラウザ

vw,vh,vmin,vmaxの対応しているブラウザはこちら。
一部機能の制限があるようですが、IE9からの対応しています。
Androidは4.4からの対応になります。

サンプルコード

vwを使ってみます。

HTML

<div id="vw80">width: 80vw;</div>
<div id="w80">width: 80%;</div>

CSS

#vw80 {
	width: 80vw;
	background: red;
}
#w80 {
	width: 80%;
	background: blue;
}

vwはviewportの幅を100として、サイズを指定します。
vwを使ったデモページ
　

上記サンプルではスクロールバーが出ていないので問題ないですが、通常サイトを作っている場合はコンテンツの高さがある程度あるので、画面右側にスクロールバーが出るか思います。
その場合、vwはスクロールバーを含んだサイズになるので、%で指定した場合より少し大きくなります。

vhを使ったデモページ2
そのため、場合にもよりますが横幅の指定はvwより%の方がよいかもしれません。
　

次にvhを使ってみます。
vhはviewportの高さを100として、サイズを指定します。

HTML

<div id="contents">
	<div id="vh100">height: 100vh;</div>
	<div id="h100">height: 100%;</div>
</div>

CSS

#contents {
	width: 100%;
	height: 300px;
}
#vh100 {
	float: left;
	width: 200px;
	height: 100vh;
	background: red;
}
#h100 {
	float: left;
	width: 200px;
	height: 100%;
	background: blue;
}

%指定が親要素に対する指定になっているのに対して、vhでの指定はブラウザの高さ変更に合わせて変動します。
vhを使ったデモページ
　

vminを使ってみます。
viewportの幅と高さで値が小さい方を100として、サイズを指定します。

HTML

<div id="result">
	ウインドウ幅:<span id="winw"></span>px, 
	ウインドウ高さ:<span id="winh"></span>px, 
	幅:<span id="elew"></span>px, 
	高さ:<span id="eleh"></span>px
</div>

<div id="vmin50">width: 50vmin;<br />height: 50vmin;</div>

CSS

#vmin50 {
	width: 50vmin;
	height: 50vmin;
	background: red;
}

JavaScript

$(function() {
	function check() {
		$('#winw').text($(window).width())
		$('#winh').text($(window).height())
		$('#elew').text($('#vmin50').width())
		$('#eleh').text($('#vmin50').height())
	}
	$(window).on('load resize', function() {
		check();
	});
});

サイズの変更が分かりやすいように、画面の幅高さと要素の幅高さを表示しています。
vminを使ったデモページ
　

vmaxを使ってみます。
vminとは逆で、viewportの幅と高さで値が大きい方を100として、サイズを指定します。

HTML

<div id="result">
	ウインドウ幅:<span id="winw"></span>px, 
	ウインドウ高さ:<span id="winh"></span>px, 
	幅:<span id="elew"></span>px, 
	高さ:<span id="eleh"></span>px
</div>

<div id="vmax50">width: 50vmax;<br />height: 50vmax;</div>

CSS

#vmax50 {
	width: 50vmax;
	height: 50vmax;
	background: blue;
}

JavaScript

$(function() {
	function check() {
		$('#winw').text($(window).width())
		$('#winh').text($(window).height())
		$('#elew').text($('#vmax50').width())
		$('#eleh').text($('#vmax50').height())
	}
	$(window).on('load resize', function() {
		check();
	});
});

vmaxを使ったデモページ
　

【参考サイト】

• [CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス