rem方案原理
rem方案的原理其實就是，將每一個不同的屏幕划分成相同的份數，讓同一個元素在不同的屏幕上占據相同比例的空間。1rem等於此頁面html的font-size，rem可以理解為每份是多少px，比如說，我們的設計稿寬度為750px，我們規定將頁面划分成10份，那么rem=75px，如果有一個div寬度為75px，就剛好為1rem。即，將750px寬的屏幕划分為10份，這個div寬度占一份。那么只需要讓此div在不同寬度的屏幕下寬度都占一份，就行了。那么我們只需要做一件事，就是確定不同的屏幕下一份有多寬，即不同設備下1rem等於多少px？這很容易計算，document.body.clientWidth / 10 就能算出來。
通過這個式子很清楚地看到，核心思想就是把不同的屏幕划分成相同的份數，在設計稿中占一份的，在所有設備屏幕上都應該占一份。
rem的工程化實踐
在實際開發工程時，我肯定不想去把設計稿里的元素一一計算轉成rem，然后在代碼里寫width: xxx rem，我還是希望直接寫設計稿里標注的px，然后由工具自動轉成rem去適配所有設備。
這里介紹兩個npm package，1. lib-flexible，2.在postccs里使用postcss-pxtorem。
lib-flexible很簡單，源碼只有40行，它就是規定不論什么設備，都把寬度分成10份，並且設定了html的font-size。
var docEl = document.documentElement
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
而postcss-pxtorem，是postcss的一個插件，在處理css時自動將手寫的px轉成rem，配置項可以去看文檔：
'postcss-pxtorem': {
rootValue: 75, //設計稿的rem
propList: ['*']
}
這樣一來，pxtorem這個插件會自動將我們寫的css中的px轉成相對於750px尺寸設計稿的rem單位了。
告別rem，使用vw
lib-flexible的GitHub已經宣布停止使用rem方案了，因為找到了新的更好的全局性參照單位：vw。
什么是 vw ？同樣根據CSS Values and Units Module Level 4：（vw）等於初始包含塊（html元素）寬度的1%。換句話說，可以認為： 1vw 就等於屏幕寬度的1% 。這個單位似乎是專門為我們適配量身打造的。首先，它本質上就是一個百分比單位，比如 3vw 就相當“屏幕寬度的百分之三”；其次，它又是全局性的與屏幕寬度直接相關的單位。那么上一節概念闡述中舉的兩個百分比的例子，用 vw 單位可以直接寫成：75px = 75/750 = 10vw，即占頁面寬度的10%。
那么移動瀏覽器對 vw 的支持度如何呢？根據caniuse.com：
即 iOS 8+和 Android 4.4+都支持 vw ，而目前的手機應用通常支持iOS 9+和Android 5+。所以，實踐中使用 vw 單位完全可行。而這也正是手機淘寶團隊19年初正式轉向使用 vw 單位適配的原因。
那么，還是之前的問題，人工進行設計稿的 px 到 vw 單位的轉換太麻煩。在開發中使用Webpack編譯打包，那么已經有人開發了postcss的插件：postcss-px-to-viewport。配置好這個插件，你寫CSS的時候可以嚴格按照設計稿上的像素值去寫，這個插件負責將你寫的 px 轉換為 vw 。