Vue实现PC端分辨率自适应

方案

• lib-flexible + px2remLoader
• lib-flexible：阿里可伸缩布局方案
• px2rem-loader：px 转 rem

安装依赖

npm install px2rem-loader -D
npm install lib-flexible -S

px转换成rem

px2remLoader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的方法生成的，我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10 ，这里假设设计稿宽为1920px

• build/utils.js 中添加 px2remLoader

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中）
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192,  //根据视觉稿，rem为px的十分之一，1920px  192 rem
      // remPrecision: 8//换算的rem保留几位小数点
    }
  }

• 放进loaders数组中

// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
   const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

   if (loader) {
     loaders.push({
       loader: loader + '-loader',
       options: Object.assign({}, loaderOptions, {
         sourceMap: options.sourceMap
       })
     })
   }
   //...
 }

修改 flexible.js

• 全局搜索 flexible.js
  
• 将代码修改为适应PC端的代码

  function refreshRem(){
     var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          width = width * dpr;
      }
      //缩放比例，可按实际情况修改
      var rem = width / 8;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }
  

• 对于不想被转换的样式，可在其后添加 /*no*/ 保证不被转换

  font-size: 18px;/*no*/
  

引入依赖

• 将刚才修改的 flexible.js 文件 copy 到 scr/utils 目录（各位老板可随意放置）
• main.js 引入 lib-flexible

  import './utils/flexible.js' (路径为flexible.js放置路径)