h5手機端自適應解決方案

　　現在手機端的項目比較多，自適應不用說那是必備技能了，目前應用的單位最多還是rem,

然而每次在制作過程中需要自己計算rem值比較繁瑣，現在分享下postcss-pxtorem的使用可以把px直接轉換為rem，省下了計算的體力了

   首先安裝依賴 

npm install postcss-pxtorem -D

其次設置規則
在package.json里面配置下，配置如下

"postcss": {
  "plugins": {
    "autoprefixer": {},
    "postcss-pxtorem": {
      "rootValue": "72",//設計稿十比一比例換算 ，我這里得設計稿720 
      "propList": [ //可以設置全部屬性轉換為rem propList ['*']

 　　　　"padding", .....

 ]
 }
 }
},
最后配合flexrem.js使用就解決了移動端適配問題

(function(doc, win) {

    var docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //改變窗口大小 重新設置rem

        recalc = function() {

            var clientWidth = docEl.clientWidth;
            if(clientWidth > 750){//屏幕最大尺寸不超過750
                clientWidth = 750
            }
            if (!clientWidth) return;
        
            docEl.style.fontSize = (clientWidth / 10) + 'px';

        };

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);