本文轉(zhuǎn)載于啃先生，首發(fā)于微信公眾號(hào)（啃先生）
http://www.cnblogs.com/giveiris/p/5254150.html
壹 | Fisrt
其實(shí)窗价，尺寸（width、height账月、margin澡刹、padding等等）相關(guān)的適配闲孤，除了使用rem以外豪治，還可以使用CSS3的vh和vw洞拨。
Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).
意思是
vw代表viewport寬度的1%，即viewport寬度被劃分為100份鬼吵，1vw代表1份的寬度扣甲。
vh是高度。規(guī)律跟vw一樣齿椅。
wmin是vh和vw中較小者琉挖；vmax是vh和vw中較大者
咋一看，不就是CSS中的百分比嘛涣脚？
div{ width = 1vw; }
等同于
div{ width:1%; }
也沒錯(cuò)示辈，但是當(dāng)我們想實(shí)現(xiàn)類似九宮格圖片的時(shí)候，就能感受到它的魔性了遣蚀。
例如要實(shí)現(xiàn)上面的圖片布局矾麻，即三張圖占滿一整屏，而每張圖都是正方形芭梯，用vw怎么實(shí)現(xiàn)险耀？代碼如下：
如果使用%，純粹用CSS是無(wú)法實(shí)現(xiàn)的玖喘，除非JS計(jì)算動(dòng)態(tài)設(shè)置甩牺。
那么vw、vh的兼容性如何呢累奈？看看下圖caniuse.com的查詢結(jié)果贬派，移動(dòng)端安卓4.3自帶瀏覽器不支持。
soga澎媒，看起來(lái)很簡(jiǎn)單搞乏。那么問(wèn)題來(lái)了，為什么之前的文章要費(fèi)那么大力氣寫rem戒努？
貳 | Second
看到這里请敦，可以休息一小段了，現(xiàn)在對(duì)三篇文章做一個(gè)總結(jié)
回顧上一期寫1個(gè)物理像素border的實(shí)現(xiàn)的時(shí)候储玫，提到有兩種實(shí)現(xiàn)方法：
整個(gè)頁(yè)面縮放冬三，viewport 設(shè)置 scale
單個(gè)元素縮放，transform scale
其中缘缚，對(duì)單個(gè)元素的邊框進(jìn)行縮放的方案無(wú)法實(shí)現(xiàn)圓角勾笆。而整個(gè)頁(yè)面縮放的方案跟CSS標(biāo)準(zhǔn)一樣實(shí)現(xiàn)。
vw(vh)和rem要解決的是尺寸相關(guān)的適配桥滨，對(duì)比vw(vh)跟rem的區(qū)別：
1. 兼容性窝爪，vw不兼容安卓4.3及以下自帶瀏覽器
2. px轉(zhuǎn)rem的插件較為豐富
那么，安卓4.3及以下操作系統(tǒng)在國(guó)內(nèi)的市場(chǎng)份額是多少呢齐媒？友盟的統(tǒng)計(jì)結(jié)果是約31%蒲每，量較大。
因此較為穩(wěn)妥的方案還是rem喻括。
所以當(dāng)拿到一個(gè)移動(dòng)端Web項(xiàng)目邀杏，我的決策思路如下：
叁 | Third
關(guān)于移動(dòng)適配的專題還有很多，例如設(shè)計(jì)師輸出多少分辨率的素材，才能即節(jié)省流量望蜡，又兼顧清晰度唤崭？
不管什么專題，前提是理解viewport脖律，CSS像素和物理像素的概念以及它們之間的關(guān)系谢肾。所以到目前為止我所整理出來(lái)的三篇文章，是移動(dòng)適配知識(shí)中非常重要的基礎(chǔ)知識(shí)小泉。
