CSS中那些你不知道的長度的單位VW和VH

aokihu發表於2018-06-21
CSS

通常我們要設定一個元素佔滿螢幕的時候我們可以設定這個元素的長和寬的數值為100%，CSS程式碼如下

.block {
    height: 100%;
    width: 100%;
}
複製程式碼

OK，大家覺得這樣是不是就搞定了呢？

NO!怎麼可能！會這麼簡單就能做到佔滿螢幕了嗎？檢查過你的html body的高寬了嗎？是不是100%，OK就算這兩個已經是100%了，那麼你的容器物件呢？這樣一來完整的CSS就要這樣寫了

html, body {
    height: 100%;
    width: 100%;
}

.container {
    height: 100%;
    width: 100%;
}

.container .block {
    height: 100%;
    width: 100%;
}
複製程式碼

好了，現在應該可以吧，NO！怎麼可能！你現在是把這個容器的高寬都限定死了，如果頁面的內容超過了限定的高度寬度呢？那麼你的100%就不是螢幕的大小了。

還有一個問題，就是定位方式，如果你的其他元素使用了fixed absoluted relative 又或者使用了float:left float:right等方式定位，那麼就破壞了原來的盒高度，那麼就算是設定為100%也不一定能夠佔滿整個螢幕了。

那有沒有解決辦法呢？當然有，可以使用CSS的calc來動態的計算長寬啊，不過這裡有個效能的問題，calc在每次CSS樣式調整的時候都要計算，效能上面會有很大的消耗。

那麼可以使用JS來動態調整嗎？當然可以了，也有很多現成的庫。

但是！今天要介紹的東西是CSS原生自帶的，而且還非常方便！那就是vw 和 vh二兄弟，先來看看他們怎麼用

.block {
    width: 100vw;
    height: 100vh;
}
複製程式碼

好了，程式碼結束，現在已經實現了佔滿整個螢幕的實現了，我們不需要知道我們的容器大小，反正就是很霸道的設定成了佔滿整個螢幕。

那麼來看看這兩個單位吧vw = viewport width vh = wiewport height簡單來說就是裝置可視檢視的寬度和長度，數值用的是百分比，也就是跟100%這樣一樣使用，這樣一來就能很容易的設定我們需要的長度和寬度了。

那麼出來一個問題，假如我設定的元素長度佔滿了整個螢幕，那麼不是會無限迴圈的延長容器的高度了麼？答案是當然不會了，使用vh設定的高度固定為裝置的可視高度，跟原來的容器高度一點關係都沒有，因此不會無限的延長容器的高度。

有了這兩個單位後，我們就能很輕鬆的製作彈窗了，再也不用去複雜的計算長寬，一切都交給CSS就可以了

對了，雖然這兩個單位是新新增的，但是微信小程式也支援的哦

希望這片文章對你有所幫助

相關文章