h5手機端自適應解決方案

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

然而每次在製做過程當中須要本身計算rem值比較繁瑣，如今分享下postcss-pxtorem的使用能夠把px直接轉換爲rem，省下了計算的體力了

   首先安裝依賴 

其次設置規則
在package.json裏面配置下，配置以下npm install postcss-pxtorem -D

"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);