移动端vue完美自适应适配方案 之 webpack 配置 px自动转rem，以及根据视口改变rem（附上GitHub地址）

webpack 移动端自适应方案px自动转rem 3步走

• 配置完成后在项目中直接根据设计稿的px大小来敲代码即可

• 在开发环境中安装插件：                                                                                                                                                        

       npm install --save-dev px2rem-loader

•  根据视口改变html的rem属性，在static目录下创建flex.js存放已压缩过的（待补充GitHub地址）

(function(win, lib) {   var doc = win.document;   var docEl = doc.documentElement;   var metaEl = doc.querySelector('meta[name="viewport"]');   var flexibleEl = doc.querySelector('meta[name="flexible"]');   var dpr = 0;   var scale = 0;   var tid;   var flexible = lib.flexible || (lib.flexible = {});    if (metaEl) {   
 var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);     if (match) {       scale = parseFloat(match[1]);       dpr = parseInt(1 / scale);     }   } else if (flexibleEl) {     var content = flexibleEl.getAttribute('content');     if (content) {       var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);       var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);       if (initialDpr) {         dpr = parseFloat(initialDpr[1]);         scale = parseFloat((1 / dpr).toFixed(2));       }       if (maximumDpr) {         dpr = parseFloat(maximumDpr[1]);         scale = parseFloat((1 / dpr).toFixed(2));       }     }   }    if (!dpr && !scale) {     var isAndroid = win.navigator.appVersion.match(/android/gi);     var isIPhone = win.navigator.appVersion.match(/iphone/gi);     var devicePixelRatio = win.devicePixelRatio;     if (isIPhone) { 
    if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {         dpr = 3;       } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){         dpr = 2;       } else {         dpr = 1;       }     } else {    
           dpr = 1;     }     scale = 1 / dpr;   }    docEl.setAttribute('data-dpr', dpr);   if (!metaEl) {     metaEl = doc.createElement('meta');     metaEl.setAttribute('name', 'viewport');     metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');     if (docEl.firstElementChild) {       docEl.firstElementChild.appendChild(metaEl);     } else {       var wrap = doc.createElement('div');       wrap.appendChild(metaEl);       doc.write(wrap.innerHTML);     }   }    function refreshRem(){     var width = docEl.getBoundingClientRect().width;     if (width / dpr > 540) {       width = 540 * dpr;     }     var rem = width / 10;     docEl.style.fontSize = rem + 'px';     flexible.rem = win.rem = rem;   }    win.addEventListener('resize', function() {     clearTimeout(tid);     tid = setTimeout(refreshRem, 300);   }, false);   win.addEventListener('pageshow', function(e) {     if (e.persisted) {       clearTimeout(tid);       tid = setTimeout(refreshRem, 300);     }   }, false);    if (doc.readyState === 'complete') {     doc.body.style.fontSize = 12 * dpr + 'px';   } else {     doc.addEventListener('DOMContentLoaded', function(e) {       doc.body.style.fontSize = 12 * dpr + 'px';     }, false);   }     refreshRem();    flexible.dpr = win.dpr = dpr;   flexible.refreshRem = refreshRem;   flexible.rem2px = function(d) {     var val = parseFloat(d) * this.rem;     if (typeof d === 'string' && d.match(/rem$/)) {       val += 'px';     }     return val;   } 
             flexible.px2rem = function(d) {     var val = parseFloat(d) / this.rem;     if (typeof d === 'string' && d.match(/px$/)) {       val += 'rem';     }     return val;   }  })(window, window['lib'] || (window['lib'] = {})); 

•   webpack配置文件 配置px2rem

    build目录下vue-loader.conf.js中，做如下配置：（我的设计稿是750px所以配置为37.5）

postcss:[require('postcss-px2rem')({'remUnit':37.5,'baseDpr':2})]

   假如你的项目是使用vue脚手架创建，在vue.config.js文件中做以下配置

module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')(rootValue: 37.5,'baseDpr':2}),
        ]
      }
    }
  },
}

或者创建文件postcss.config.js，在文件中做以下配置

module.exports ={
  plugins: [
    require('autoprefixer')(),
    // require('postcss-px2rem')({ remUnit: 75 })
    require('postcss-pxtorem')({
      rootValue: 37.5,
     
    })
  ]
}

  4.重新运行代码 npm run dev