移動端頁面自適應解決方案

該方案使用相當簡單，把下面這段已壓縮過的 原生JS（僅1kb，原始碼已在文章底部更新，2017/5/3） 放到 HTML 的 head 標籤中即可（注:不要手動設定viewport，該方案自動幫你設定）

<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return
 
 t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(normal,e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt
 
(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=normal?1:1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content"
 
,"width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=normal?"50px": a/2*s*n+"px"},e.exports=t["default"]}]);  flex(false,100, 1);</script>

程式碼原理

這是阿里團隊的高清方案佈局程式碼，所謂高清方案就是根據裝置螢幕的DPR（裝置畫素比，又稱DPPX，比如dpr=2時，表示1個CSS畫素由4個物理畫素點組成）* 動態設定 html 的font-size, 同時根據裝置DPR調整頁面的縮放值，進而達到高清效果*。

有何優勢

引用簡單，佈局簡便
根據裝置螢幕的DPR,自動設定最合適的高清縮放。
保證了不同裝置下視覺體驗的一致性。（老方案是，螢幕越大元素越大；此方案是，螢幕越大，看的越多）
有效解決移動端真實1px問題（這裡的1px 是裝置螢幕上的物理畫素）
如何使用

重要的事情說三遍！
絕不是每個地方都要用rem，rem只適用於固定尺寸！
絕不是每個地方都要用rem，rem只適用於固定尺寸！
絕不是每個地方都要用rem，rem只適用於固定尺寸！
在相當數量的佈局情境中（比如底部導航元素平分螢幕寬，大尺寸元素），你必須使用百分比或者flex才能完美佈局！
看過 《手機端頁面自適應解決方案—rem佈局》的朋友，應該對rem有所瞭解，這裡不再贅述，
此方案也是預設 1rem = 100px，所以你佈局的時候，完全可以按照設計師給你的效果圖寫各種尺寸啦。
比如你在效果圖上量取的某個按鈕元素長 55px, 寬37px ，那你直接可以這樣寫樣式：

.myBtn {
   width: 0.55rem;
   height: 0.37rem;
}