響應(yīng)式布局的單位我們第一時(shí)間會(huì)想到通過rem單位來實(shí)現(xiàn)適配，但是它還需要內(nèi)嵌一段腳本去動(dòng)態(tài)計(jì)算跟元素大小。

比如：

(function (doc, win) {
let docEl = doc.documentElement
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
let recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 14 * (clientWidth / 320) + 'px'
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

那有沒有一個(gè)單位不需要JS和CSS耦合在一起的單位？答案是有的，就是vw／vh。

vw = view width
vh = view height

這兩個(gè)單位是CSS3引入的，以上稱為視口單位允許我們更接近瀏覽器窗口定義大小。

vw、vh、vmin、vmax 的含義

（1）vw、vh、vmin、vmax 是一種視窗單位，也是相對(duì)單位。它相對(duì)的不是父節(jié)點(diǎn)或者頁面的根節(jié)點(diǎn)。而是由視窗（Viewport）大小來決定的，單位 1，代表類似于 1%。

視窗(Viewport)是你的瀏覽器實(shí)際顯示內(nèi)容的區(qū)域—，換句話說是你的不包括工具欄和按鈕的網(wǎng)頁瀏覽器。

（2）具體描述如下：

vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）
vh：視窗高度的百分比
vmin：當(dāng)前 vw 和 vh 中較小的一個(gè)值
vmax：當(dāng)前 vw 和 vh 中較大的一個(gè)值 
 

vw、vh 與 % 百分比的區(qū)別

（1）% 是相對(duì)于父元素的大小設(shè)定的比率，vw、vh 是視窗大小決定的。

（2）vw、vh 優(yōu)勢(shì)在于能夠直接獲取高度，而用 % 在沒有設(shè)置 body 高度的情況下，是無法正確獲得可視區(qū)域的高度的，所以這是挺不錯(cuò)的優(yōu)勢(shì)。

vmin、vmax 用處

做移動(dòng)頁面開發(fā)時(shí)，如果使用 vw、wh 設(shè)置字體大小（比如 5vw），在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的。

由于 vmin 和 vmax 是當(dāng)前較小的 vw 和 vh 和當(dāng)前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。

瀏覽器兼容性

（1）桌面 PC

Chrome：自 26 版起就完美支持（2013年2月）
Firefox：自 19 版起就完美支持（2013年1月）
Safari：自 6.1 版起就完美支持（2013年10月）
Opera：自 15 版起就完美支持（2013年7月）
 

IE：自 IE10 起（包括 Edge）到現(xiàn)在還只是部分支持（不支持 vmax，同時(shí) vm 代替 vmin）

（2）移動(dòng)設(shè)備

Android：自 4.4 版起就完美支持（2013年12月）

iOS：自 iOS8 版起就完美支持（2014年9月）
 

如何利用視口單位適配頁面