有時候我們希望背景圖片也可以跟著螢幕的大小而改變，這時候，在CSS3中的vh、vm這兩個新單位就會非常方便使用。
一般來說，我們常會使用百分比（%）、畫素(px），讓我們比較一下%、px、vh/vm，這幾個功能上有什麼不同的效果。
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.outer{
background-color: rgba(92, 92, 92, 0.6);
}
.inner{
margin:auto;
background-color: #f4f405;
width:100（輸入不同單位）;
height:100（輸入不同單位）;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
我先建立兩個div，然後外面（outer）包住裡面（inner）；outer我用灰色，順便可以看出，inner的設定會怎麼樣影響到outer；最後在inner這個css樣式的地方，分別填入不同的單位。
使用px
在單位的地方填入px，很容易理解，網頁上就會呈現一個100px*100px的正方形，當我們縮放螢幕的時候，這個正方形並不會隨著變動。
使用%
使用%的時候，呈現的結果會是空白的，因為我們的div內並沒有任何內容，所以即使設定為100%，還是不會顯示出任何東西。
使用vh、vw
vh代表的是view height，也就是螢幕可視範圍高度的百分比；vw表示的是view width，也就是螢幕可是範圍寬度的百分比。
這兩個單位的使用上和百分比很類似，當我填100vh和100vw時，意思就是我的這個div要是整個螢幕的可是範圍，所以你會看到，瀏覽器全部都是黃色的，而且很重要的是，這個區塊會隨著瀏覽器的縮放而改變。
如果我填的是30vh和30vw，表示這個div要占我的可視範圍的30%，因為它會隨著你的網頁縮放而改變，所以它一定會是正方形的，只有當你視窗的長和寬比例為1:1時，它才會是正方形的。
這個方形的長度會隨著你的視窗而改變，但是因為我輸入的是30，所以都會是30%。
這時候，如果我們希望畫出一個可以隨著視窗大小而改變的正方形時，我們只要把長和寬都設成一樣的單位就可以了，例如width:20vw; height:20vw。
這時候，螢幕上就會always呈現出一個寬和長，都是可視範圍20%的正方形。
這樣的單位有什麼好用的地方呢？
有些時候，特別是在設計自適應性網頁（RWD）時我們會希望我們的圖片隨著螢幕的大小而改變，這時候我們就可以利用到這兩個新的單位。
vmin和vmax
另外，還有一個補充的單位是vmin，這個的意思是幫我抓取「長或寬較小的那個的百分比」，另一個相對的就是vmax意思就是抓取「長或寬較大的那個的百分比」。
透過這些單位，就可以更容易設計可隨視窗大小變動的圖片或按鍵。
0 意見:
張貼留言