移動端佈局有很多做法，例如流式佈局，固定寬度，Media Queries響應式佈局，rem。
流式佈局：在頁面佈局的時候通過百分比來定義寬度，但是高度大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調，這就是流式佈局的最致命的缺點。
固定寬度：在大屏幕手機下兩邊是留白的，還有一個就是大屏幕手機下看起來頁面會特別小，操作的按鈕也很小。
Media Queries響應式佈局：最明顯的缺點是工作大，維護性難。
rem實現等比例適配所有屏幕：爲了適配各種大屏手機，目前最好用的方案莫過於使用相對單位rem, 它是CSS3新增的一種單位，是相對於根元素html的字體大小的單位，簡單的說它就是一個相對單位。
基於rem的原理，我們要做的就是: 針對不同手機屏幕尺寸和dpr動態的改變根節點html的font-size大小(基準值)。
1、基準值的計算公式：
基準值 = document.documentElement.clientWidth * dpr / 10
乘以dpr，是因爲頁面有可能爲了實現1px border頁面會縮放(scale) 1/dpr 倍(如果沒有，dpr=1)。
基準值就是fontsize 假如 是蘋果6 dpr爲2 蘋果6s dpr爲3（1個物理像素 顯示兩個css像素）
已知 蘋果6的尺寸是375 基準值= 375 * 2 / 10 = 75 (表示 1rem = 75px)
同理 蘋果6s的尺寸是414 基準值= 414 * 3 / 10 = 124.2 (表示 1rem = 124.2px)
除以10，是爲了取整，方便計算(理論上可以是任何值)
所以 通過不同大小屏幕的 基準值 的改變 來 進行縮放
1.要根據不同的屏幕計算 font-size js插件來完成 淘寶插件 flexible.js
<meta name="viewport" content="width=devide-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
<meta content="" name="flexible" />
不要寫這兩個mata ，寫了dpr會默認位1 ，活着爲一指定數值了
注意每次切換的時候要刷新下頁面，drp纔會變的。。。。
- rem 自動計算插件 https://github.com/flashlizi/cssrem
其它注意點
- 兼容 1px 問題
考慮到 1px 轉換爲 rem 會有小數bug，工作流中會忽略 1px 的轉換，最小轉換數值爲 2px。
- 雪碧圖兼容問題
爲避免雪碧圖遇到小數計算 bug，設置雪碧圖內各個元素之間的間隙爲 4px
總結：rem
1.其實就是把設計圖單位 px 換成 rem ， rem是html的font—size，默認基準16px = 1 em
2.然後js自己判斷不同的屏幕 ，改變默認基準值 基準值 = document.documentElement.clientWidth * dpr / 10
3.在不同屏幕下rem的基準值變了，而我們是以rem爲單位的，那頁面元素的尺寸也就等比例變了。
一句話，在不同屏幕下改變rem的默認基準值，頁面元素的尺寸也就等比例變