點擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
通過上一篇的巴拉巴拉一堆講解，我們對這幾個單位有了一個認識。比如，兼容情況，幹嘛用的......。
這篇我們專門來談一下它的使用場景。前面三個場景都是現有方法可替代的，最後一個是V單位特有的（我覺得）。
場景一：分配空間
左右邊框區域分別佔用視窗的20vw和80vw。然而，由於塊級元素它本身就有滿屏特性，同時百分比也能取代它的這個作用。所以這種場景下使用v單位會顯得有點多餘。即不屬於V單位獨特的應用場景。
場景二：限制尺寸
有一種場景，大家估計都碰到過。當你要在屏幕上展示一張圖片時， 各種尺寸的圖片都希望展示完整的圖片信息。這個時候我們會通過JS根據屏幕寬度+圖片寬高進行各種計算來達到我們想要的目的。總結來說就是如何讓一張圖片在一屏內顯示。
使用v單位純CSS代碼也能實現。類似於下面代碼這樣搞
（100vw代表100%的視窗寬度）
（100vh代表100%的視窗高度）
image{
max-width:90vw;
max-height:90vh;
}
因為v單位是相對於視窗大小來處理的。實際展示如下：
場景三：滿屏平鋪
V單位竟然是相對視窗來顯示，那麼很容易想到可以用來做滿屏平鋪，比如我們要搞一個背景滿屏陰影遮罩的效果。
.parent{
height:100vh;
background:rgba(0,0,0,0.5);
}
上面由於塊級元素是滿屏特性，無需設置寬度。
這個效果也是有替代方案的，如高度100%，再如稍微處理後的fixed定位的元素。
【有沒有發現，上面三個應用場景，其實用CSS現有的方法都是可以實現的。難道V單位都是多此一舉嗎？我再想一種場景，現有方法很難實現的。也許只有v單位才能搞】。
四、目前發現只有v單位能搞的場景
相對視窗滿屏展示，又不脫離文檔流，關鍵是純CSS實現，如下效果：
關鍵代碼是這樣的：
.item{
width:100vw;
height:100vh;
}
最後小節：
關於V單位的使用場景就說到這裡，如發現還有其它用途，可以與之分享。
閱讀更多 小鄭搞碼事 的文章
