點擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!
通過上一篇的巴拉巴拉一堆講解,我們對這幾個單位有了一個認識。比如,兼容情況,幹嘛用的......。
這篇我們專門來談一下它的使用場景。前面三個場景都是現有方法可替代的,最後一個是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單位的使用場景就說到這裡,如發現還有其它用途,可以與之分享。
閱讀更多 小鄭搞碼事 的文章