vw、vh、vmin、vmax
這四個(gè)單位都是基于視口的。那么，什么是視口呢，我們來看一段代碼：
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
其中，瀏覽器利用 meta 標(biāo)簽里面的 width 來改變?yōu)g覽器的視口大小，將 width 設(shè)置為設(shè)備的寬度 device-width。我們可以使用document.documentElement.clientWidth 獲取瀏覽器的視口大小。
含義
vw: 視口寬度的百分比（1vw 等于視口寬度的 1%）
vh: 視口高度的百分比（1vh 等于視口高度的 1%）
vmin: 選取 vw 和 vh 中最小的那個(gè)
vmax: 選取 vw 和 vh 中最大的那個(gè)
vw、vh 是基于視口的，而不是父元素。1vw 等于1/100 的視口寬度，1vh 等于1/100 的視口高度，比如：
瀏覽器高度 950px，寬度為 1920px, 1vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px
vw、vh、％ 的區(qū)別
- ％ 是相對(duì)于父元素的大小設(shè)定的比率，vw vh 是視口大小決定的
- vw、vh 能直接獲取高度，而 ％ 如果沒有設(shè)置body的高度情況下，是無法獲取可視區(qū)域的高度。
vmin、vmax 用處
做移動(dòng)頁面開發(fā)時(shí)，如果使用 vw、wh 設(shè)置字體大?。ū热?5vw），在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的。
由于 vmin 和 vmax 是當(dāng)前較小的 vw 和 vh 和當(dāng)前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。
vw、vh、rem 相比的優(yōu)勢(shì)
- 如果使用 rem ，我們頁面的頭部引入 js 來動(dòng)態(tài)設(shè)置頁面 html 的 font-size，一般情況下基于屏幕的寬度來計(jì)算：var rem = docEl.clientWidth / 10;docEl.style.fontSize = rem + 'px'
- css 這塊，使用 less 或者 scss 來動(dòng)態(tài)計(jì)算 dom 的實(shí)際 rem 值
@function px2rem($size) {
$remSize: $size / 20;
@return #{$remSize}rem;
}
因此會(huì)有問題：
- 依賴頁面頭部的js設(shè)置，雖說基本上不會(huì)阻塞頁面渲染，但是放在頭部始終要進(jìn)行一次dom計(jì)算，不算優(yōu)雅。
- 通常使用寬度來計(jì)算 html 的 font-size 時(shí)，對(duì)于那種很寬的手機(jī)或者是ipad，會(huì)導(dǎo)致適配的不準(zhǔn)確
如果使用 vmin 可以規(guī)避上面的問題：
- 不依賴js執(zhí)行。
- 選取寬高之中較小的值進(jìn)行適配
rem em 的區(qū)別
- 兩者都是相對(duì)單位
- rem 是相對(duì)于根元素（html）的字體大小
- em 是相對(duì)于其父元素的字體大小
對(duì)于一些固定的元素，我們不推薦使用 rem，而改為使用 px 去確保在同一屏幕上保持一致，比如字體 font-size，這個(gè)更趨向于閱讀的實(shí)用性，不適合排版布局
這里給大家提供了一個(gè)px、em、rem單位的轉(zhuǎn)換工具：http://pxtoem.com/
瀏覽器兼容性
桌面 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）
移動(dòng)設(shè)備
- Android：自 4.4 版起就完美支持（2013年12月）
- iOS：自 iOS8 版起就完美支持（2014年9月）
