サンプル:【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全文はこちら(別ウィンドウで開きます)