根據(jù)CSS3規(guī)范,視口單位主要包括以下4個:
vw : 1vw 等于視口寬度的1%
vh : 1vh 等于視口高度的1%
vmin : 選取 vw 和 vh 中最小的那個
vmax : 選取 vw 和 vh 中最大的那個
用視口單位度量，視口寬度為100vw，高度為100vh（左側(cè)為豎屏情況寺擂，右側(cè)為橫屏情況）
例如匾浪，在桌面端瀏覽器視口尺寸為650px拒名，那么 1vw = 650 * 1% = 6.5px（這是理論推算的出准颓，如果瀏覽器不支持0.5px，那么實際渲染結(jié)果可能是7px）弦赖。
利用適口單位適配頁面
對于移動端開發(fā)來說戚哎，最為重要的一點是如何適配頁面裸诽，實現(xiàn)多終端的兼容，不同的適配方式各有千秋型凳，也各有缺點丈冬。
就主流的響應(yīng)式布局、彈性布局來說甘畅，通過Media Queries 實現(xiàn)的布局需要配置多個響應(yīng)斷點埂蕊，而且?guī)淼捏w驗也對用戶十分的不友好:布局在響應(yīng)斷點范圍內(nèi)的分辨率維持不表，而在響應(yīng)斷點切換的瞬間疏唾，布局帶來斷層式的切換變換蓄氧，如同卡帶的唱機般"咔咔咔"地一又一下。
而通過采用rem單位的動態(tài)計算的彈性布局,則是需要在頭部內(nèi)嵌一段腳本來進行監(jiān)聽分辨率的變化來動態(tài)改變根元素字體大小槐脏，使得CSS于JS耦合了在一起喉童。
有沒有辦法能夠解決這樣的問題呢？
答案是肯定,通過利用適口單位實現(xiàn)適配的頁面,是既能解決響應(yīng)式斷層問題顿天，又能解決腳本依賴的問題的堂氯。
用法以iPhone6為基準(750)
第一步一般來說，我都會對移動端進行meta標簽設(shè)置
<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no">
因為iPhone6以及大多數(shù)的dpr為2,為了第二步的方便進行換算
第二步設(shè)置body牌废、html的font-size
html {
? ? font-size: 13.3333333333333vw // 100px
}
13.3333333333333vw怎么來?
100 / 750 = 0.133333333333333vw 我們把這個適口當做100px,然后除于750換算得出 1px = 0.133333333333333vw 那么整個適口等于 0.133333333333333 * 100 = 13.3333333333333vw = 100px
最終于得出 100px = 1rem
通過這樣子換算我們利用vw把rem轉(zhuǎn)換成了以100px為基準
那么在項目上就很好地可以進行使用了
div {
? ? // width: 100px;
? ? width: 1rem;
}
span {
? // height: 12px
? ? height: .12rem
}
