我们常在宽高设定单位上会使用百分比（%）和像素(px），而今天我们就来学习CSS3好用的新单位vh、vm，现在先来比较一下这几个单位功能上有什么不同的效果吧！
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.outer {
background-color: rgb(0, 0, 0);
width: 600px;
height: 600px;
}
.inner {
margin: auto;
background-color: #ff0000;
width: 100<span style="color: red;">（px / % / vh、vw）</span>;
height: 100<span style="color: red;">（px / % / vh、vw）</span>;
}
</style>
<div class="outer">
<div class="inner"> </div>
</div>
我们先建立两个div：外层（outer）内层（inner），outer用黑色，宽高皆设定为600px，然后要来看看inner若填入不同单位会有怎样的变化。
- px -
使用px很容易理解，网页上就会呈现出100px*100px的正方形，当我们缩放萤幕的时候，这个正方形的大小并不会随之改变。
- % -
使用%的时候，是以父元素为基准，会因为包在外层的div而决定它的宽高，当我们外层宽高600px，内层inner即不会超过outer，从下图可见外层黑底完全被inner给覆盖住了，但接下来要讲的vw、vh它是以整个装置的宽与高为准，所以把height:100%改成height:100vh就会超出去填满整个萤幕。
- vh、vw -
vh是view height，指萤幕可视范围高度的百分比；vw则是view width，指萤幕可是范围宽度的百分比。
所以填入100vh和100vw时，我的inner要佔满整个萤幕的可视范围，所以你会看到浏览器全部都是红色的，而且很重要的是这个区块会随着浏览器的缩放而改变。
如果我填的是50vh和50vw，表示inner要佔可视范围的50%，因为它会随着你的网页缩放而改变，所以当你视窗的长和宽比例为1:1时，它才会是正方形的。
若我们希望画出一个可以随着视窗大小而改变的正方形时，我们只要把长和宽都设成一样的单位就可以了，例如width:30vw; height:30vw。这时候，萤幕上就会一直呈现出宽高都是可视范围30%的正方形。
在设计响应式网页（RWD）时希望我们的图片随着萤幕的大小而改变，这时候利用到这两个新的单位就可以办到，方便又好用。
- vmin、vmax -
另外，还有一个要补充的单位是vmin，意思是选取「长或宽较小的百分比」，反之vmax意思就是选取「长或宽较大的百分比」。
透过这些单位，就可以更容易设计可随视窗大小变动的图片或按键。
