我們常在寬高設定單位上會使用百分比（%）和像素(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意思就是選取「長或寬較大的百分比」。
透過這些單位，就可以更容易設計可隨視窗大小變動的圖片或按鍵。
