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等瀏覽器都是可以正確解析的。好在，我們還是有辦法曲線救國的。那就是，我們基礎字型大小不使用畫素單位，使用百分比單位即可，如下：

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

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