vw涧黄、vh篮昧、vmin、vmax
這四個單位都是基于視口的笋妥。那么懊昨，什么是視口呢，我們來看一段代碼：
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
其中春宣，瀏覽器利用 meta 標簽里面的 width 來改變?yōu)g覽器的視口大小疚颊，將 width 設(shè)置為設(shè)備的寬度 device-width狈孔。我們可以使用document.documentElement.clientWidth 獲取瀏覽器的視口大小。
含義
vw: 視口寬度的百分比（1vw 等于視口寬度的 1%）
vh: 視口高度的百分比（1vh 等于視口高度的 1%）
vmin: 選取 vw 和 vh 中最小的那個
vmax: 選取 vw 和 vh 中最大的那個
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ū)別
- ％ 是相對于父元素的大小設(shè)定的比率贤牛，vw vh 是視口大小決定的
- vw惋鹅、vh 能直接獲取高度，而 ％ 如果沒有設(shè)置body的高度情況下殉簸，是無法獲取可視區(qū)域的高度闰集。
vmin、vmax 用處
做移動頁面開發(fā)時般卑，如果使用 vw武鲁、wh 設(shè)置字體大小（比如 5vw）蝠检，在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的沐鼠。
由于 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax叹谁。使得文字大小在橫豎屏下保持一致饲梭。
vw、vh焰檩、rem 相比的優(yōu)勢
- 如果使用 rem 憔涉，我們頁面的頭部引入 js 來動態(tài)設(shè)置頁面 html 的 font-size，一般情況下基于屏幕的寬度來計算：var rem = docEl.clientWidth / 10;docEl.style.fontSize = rem + 'px'
- css 這塊锅尘，使用 less 或者 scss 來動態(tài)計算 dom 的實際 rem 值
@function px2rem($size) {
$remSize: $size / 20;
@return #{$remSize}rem;
}
因此會有問題：
- 依賴頁面頭部的js設(shè)置监氢，雖說基本上不會阻塞頁面渲染布蔗，但是放在頭部始終要進行一次dom計算藤违，不算優(yōu)雅。
- 通常使用寬度來計算 html 的 font-size 時纵揍，對于那種很寬的手機或者是ipad顿乒，會導致適配的不準確
如果使用 vmin 可以規(guī)避上面的問題：
- 不依賴js執(zhí)行。
- 選取寬高之中較小的值進行適配
rem em 的區(qū)別
- 兩者都是相對單位
- rem 是相對于根元素（html）的字體大小
- em 是相對于其父元素的字體大小
對于一些固定的元素泽谨，我們不推薦使用 rem璧榄，而改為使用 px 去確保在同一屏幕上保持一致特漩，比如字體 font-size，這個更趨向于閱讀的實用性骨杂，不適合排版布局
這里給大家提供了一個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搓蚪，同時 vm 代替 vmin）
移動設(shè)備
- Android：自 4.4 版起就完美支持（2013年12月）
- iOS：自 iOS8 版起就完美支持（2014年9月）
