Vw:視區寬度百分值

Vh:視區高度百分值

Vmin:取Vw或Vh中較小的那一個

Vmax:取Vw或Vh中較大的那一個

1.視區:是指瀏覽器內部的可視區域大小，即window.innerWidth/window.innerHeight大小，不包含任務欄標題欄以及底部工具欄的瀏覽器區域大小

2.場景之元素的尺寸限制

我們應該都做過或見過這樣的交互：點擊下圖，彈框查看原始大圖；或者一屏內（不能有滾動條）大圖幻燈片瀏覽。這類需求讓人頭疼的地方之一就是原始大圖的尺寸限制問題——因為很有可能圖片過大，尼瑪一屏顯示器區域不夠放，我們需要對其進行縮放處理。這類限制的實現，在當下，需要獲得圖片的原始大小，以及瀏覽器內部尺寸，算大小，算比例等，算是比較折騰的。但是，vw, vh等單位本身就是瀏覽器視區大小相關單位，直接使用其做限制，豈不省了N多JS代碼？？img { max-height: 90vh; }

3.基于vw的響應式排版和布局

一般而言，屏幕越大，我們希望文字大小也越大，元素的尺寸也能等比例放大，尤其在現在的網頁設計風格中。

如果要實現這種彈性自適應效果，目前主流的實現是通過設定根元素的font-size大小，具體元素或模塊使用rem或em單位來實現。
一種是直接設定一個臨界點字體大小，如：

還有一種就是使用JS在resize或者屏幕旋轉的時候，動態修改root的font-size大小。

前面一種基于@media的CSS實現問題在于，內容的彈性自適應只會在臨界點的時候，“Duang”變化下，于是，我們瀏覽器尺寸拉伸的時候，會感受到類似“噔噔噔”卡殼的效果，感覺就像是吃了含笑半步癲，使用JS的問題在于他是JS，要保證加載體驗，需要頭部內聯，為了保證實時性，需要多個瀏覽器變化事件監測，用我的口頭禪講就是“顯得啰嗦”。
那有沒有兩全其美的方法呢？

有，那就是本文要隆重請出場的vw，配合CSS3 calc計算實現動態字體大小效果。

例如，我們希望瀏覽器寬度在600px~1000px變化的時候，html根元素的font-size大小是18px~22px之間對應變化的，則可以：

于是，理論上，一個18px~22px字體大小動態匹配的布局基礎就建好了。

一般出現“理論上”這三個字，就說明我要“放坑”了，大家閃開~~

此“坑”就是蘋果系統的Safari瀏覽器不認識上面的屬性值（如下截圖）：

就Safari不行，window下的所有瀏覽器，包括IE，以及mac下的Chrome等瀏覽器都是可以正確解析的。好在，我們還是有辦法曲線救國的。那就是，我們基礎字體大小不使用像素單位，使用百分比單位即可，如下：

有個動態的根字體大小，我們就可以使用rem或em這些相對單位，來讓我們的頁面排版和布局更富有彈性。
更新于2017年2月8日
經過大型項目實踐，下面這段CSS是最好的基于rem和vm和calc實踐代碼：

然后，就可以愉快地使用rem單位用來排版和布局啦！

每當我疑惑的時候，我不是去找個“我覺得應該是”的解釋，而是，新建個HTML頁面，像學生時代做生物實驗般，多條件對比驗證之。

多花點功夫，多些想法（感性認知，如果這樣……或者那樣……），多實踐實踐（制作demo），多總結總結（寫作），再深入延伸延伸（水平方向流體布局 → 水平時間軸）；久而久之，水平自然大幅提升，瓶頸自然會突破

總結

以上是生活随笔為你收集整理的Vh和Vw的简介和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。