vminを使ったレスポンシブレイアウト

サンプル:【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について:ほんっとにはじめてのHTML5

このサンプルは<section>要素に width:80vmin; height:80vmin; margin:5vmin auto; padding:5vmin; を指定。ウィンドウサイズか変わっても、正方形のブロックが中央に表示されます。

<!--HTMLの抜粋です-->
<body>
<section>
<h1>vminを使ったレスポンシブレイアウト</h1>
<p>text</p>
</section>
<footer> </footer>
</body>
<!--CSSの抜粋です-->
body {
	text-align:center; 
	margin:0;
	width:100%;
	height:100vh;
	background:#000 url(../img/bg2.jpg) center center /cover no-repeat;}
/*section*/
section {
	margin:5vmin auto;
	padding:5vmin;
	width:80vmin;
	height:80vmin;
	background:rgba(255,255,255,0.4);
	overflow:auto;}
section p {margin:4vmin auto; text-align:left}
/*footer*/
footer {margin:0 5vmin 1em; font-size:90%;}

このページのCSS全文はこちら(別ウィンドウで開きます)