前言
首先你要知道 vw 和 rem 是什么？怎么使用？
①：簡單來說 vw 是視口單位，相當於把視口等分成了100，1vw = 1;
②：rem是相對單位，設置根元素 html 的 font-size，比如給 html 設置字體大小為100px，1rem = 100px;
注：我之前針對 vw 和 rem 分別寫過一篇博客，詳見如下
vw：https://www.cnblogs.com/tu-0718/p/9906692.html
rem：https://www.cnblogs.com/tu-0718/p/9146631.html
正文
還記得第一次知道 rem 時，我的心情如沐春風，感覺找到了新大陸
那時常為移動端寫自適應頁面而苦惱，傳統的百分比布局和媒體查詢早已讓我心力交瘁
百分比布局的缺點：寬度雖然能隨屏幕自適應，但高度固定不變，當設備屏幕越來越大，會有一種被強行拉伸的既視感，用戶體驗差
媒體查詢的缺點：CSS 代碼量增多，體積增大，要為每一個不同分辨率的設備單獨寫一套樣式來自適應，這樣的話我寧願狗帶
在這種情況下，rem 的出現無異於黑暗中的一道曙光，不過它也有一個缺點
rem的缺點：需要引入一段JS代碼，這樣違背了樣式行為分離的思想，而且耦合深，無法解耦
不過，對於很多人來說這並不是問題，畢竟引入一段 JS 代碼能省去那么多麻煩，何樂而為呢？
如果你對 rem 的這個缺點無法忍受或追求更好的解決方案，那么 vw 無疑會是你的另一道曙光
使用 vw，不需要引入 JS 代碼就能達到比 rem 更好的效果，並且相對於視口，所以在寬屏上也能很好的顯示
vw的缺點：vw 雖然好用，但卻有一個蛋疼的地方，因為相對於視口，所以失去了最大寬度/高度的限制，
可能你在寬屏上看到完美，豎屏上就不忍直視了。這時需要你額外為元素添加最大寬度/高度來限制
說了這么多，難道就沒有一種方法能夠讓我們真正身心愉悅的寫移動端的頁面了嗎？答案是肯定的！！！
但俗話說得好，三個臭皮匠，頂個諸葛亮。既然單獨一種方法不行，我們就打配合嘛，這樣 vw + rem 的方式就應運而生了
①：我們以 iPhone6為基准，屏幕寬度為375px，然后換算成 vw
375 / 100 = 3.75;
注：vw 是視口單位，被均分成了100，1vw = 1，所以根據上面計算，1vw = 3.75px
②：一般使用 rem 會給 html 的 font-size 設置大小為 100px，因為方便計算，這里需要把100px 換算為 vw
100 / 3.75 = 26.6666666vw；
注：上面結果能最大限度減少像素偏差，經測試，若值舍五入為27vw或26vw都會有1-2像素的偏差
原文參考：http://www.cnblogs.com/xwkj/p/10308082.html
Demo
此時表面上看html的font-size被設置為26.6666666vw，但實際html的font-size為100px，1rem = 100px
元素的值還是用rem，而不是用vw，這么說可能有點繞，運行下面demo在iPhone6下查看就會明白了
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <style> html { font-size: 26.6666666vw; } div { margin: 0.2rem auto; width: 3rem; height: 0.3rem; line-height: 0.3rem; color: #fff; font-size: 0.16rem; text-align: center; background-color: #000; } </style> </head> <body> <div>我是第一</div> <div>我是第二</div> <div>我是第三</div> </body> </html>
注：上面div的 font-size 我用的 rem，沒用px，主要想讓demo效果更明顯。
在實際項目中，有時並不想讓字體隨設備屏幕變大而變大，可根據項目需求選擇為 font-size 設置 rem 還是 px