一.Flexible方案
核心思路：利用終端寬度役首，設置body font-size 適配rem后添。
根據(jù)上述方案祖很，我們需要將設計稿中的 px 轉化為 rem，如果每一次都需要自己計算 px 轉換 rem嫉鲸，就太麻煩了。為了簡化改過程歹啼，衍生出很多 px 轉換 rem 的小工具玄渗。其中使用最為廣泛的是 postcss-px2rem 。使用該用具狸眼，在實際開發(fā)中直接按照設計稿寫 px 就可以了藤树。
示例：
.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
使用插件轉換后：
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}
文本字號不建議使用 rem。前面大家都見證了如何使用 rem 來完成 H5 適配拓萌。那么文本又將如何處理適配岁钓。是不是也通過rem來做自動適配。顯然微王，我們在 iPhone3G 和 iPhone4 的 Retina 屏下面屡限，希望看到的文本字號是相同的。也就是說炕倘，我們不希望文本在 Retina 屏幕下變小囚霸，另外，我們希望在大屏手機上看到更多文本激才，以及拓型，現(xiàn)在絕大多數(shù)的字體文件都自帶一些點陣尺寸，通常是 16px 和 24px瘸恼，所以我們不希望出現(xiàn) 13px 和 15px 這樣的奇葩尺寸劣挫。如此一來，就決定了在制作 H5 的頁面中东帅，rem 并不適合用到段落文本上压固。
總結一下，使用動態(tài) rem 方案需要做的工作：
- meta 標簽設置 viewport 寬度為屏幕寬度靠闭；
- 根據(jù)不同屏幕修改根元素 font-size 大小帐我，一般設置為屏幕寬度的十分之一（可引入 lib-flexible 庫坎炼，或者自己寫相應邏輯）；
- 開發(fā)環(huán)境配置 postcss-px2rem 或者類似插件拦键；
- 根據(jù)設計稿寫樣式谣光，元素寬高直接取設計稿寬高即可，單位為 px芬为，插件會將其轉換為 rem萄金；
- 段落文本也按照設計稿寫，單位為px媚朦，不需要轉換為 rem氧敢；
缺點：
flexible對dpr一刀切，無法正確適配屏幕字體询张。
lib-flexible 文檔中有如下一段話孙乖，表示 flexible 方案已經(jīng)可以廢棄，推薦使用 vw 視口單位進行適配份氧。
由于 viewport 單位得到眾多瀏覽器的兼容唯袄，lib-flexible 這個過渡方案已經(jīng)可以放棄使用，不管是現(xiàn)在的版本還是以前的版本半火，都存有一定的問題越妈。建議大家開始使用 viewport 來替代此方案。
二钮糖、Viewport方案
核心思路：利用跟元素百分比梅掠，子元素都可以使用 這個百分比。有人會問店归，為什么不直接使用100%呢阎抒，因為瀏覽器的子元素只能繼承父元素的高寬，不能繼承根元素的百分比消痛。
vw單位換算：如果按照375的設計稿為基礎且叁， 視口寬度為 100vw 占滿整個視口區(qū)域，那么 1vw 相當于占整個視口寬度的1%秩伞，所以 1px= 1/375*100 vw 所有的頁面元素都可以直接進行計算換算成 vw 單位逞带，但是這樣計算和百分比方案計算比較類似，都會比較麻煩纱新。
vw 適配方案的流程：
- meta 標簽設置 viewport 寬度為屏幕寬度展氓；
- 開發(fā)環(huán)境配置 postcss-px-to-viewport 或者類似插件；
- 根據(jù)設計稿寫樣式脸爱，元素寬高直接取設計稿寬高即可遇汞，單位為 px，插件會將其轉換為 vw；
- 段落文本也按照設計稿寫空入，單位為px络它，不需要轉換為 vw；
