Vue2 大屏适配

1. 插件安装

npm i lib-flexible
npm i px2rem-loader // 自动将px转换为rem
npm i postcss-pxtorem  // 自动将px转换为rem

2. 插件使用

// main.js
import 'lib-flexible'

3. 插件配置

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 192 // 1920设计稿
          })
        ],
        dist: {
          src: 'src/*.css',
          dast: 'build'
        }
      }
    }
  },
// 配置px2rem-loader
chainWebpack(config) {
 config.module
    .rule('css')
    .test(/\.css$/)
    .oneOf('vue')
    .use('px2rem-loader')
    .loader('px2rem-loader')
    .options({
      remUnit: 192, // 根据视觉稿，rem为px的十分之一，1920px  192 rem
      remPrecision: 8 // 换算的rem保留几位小数点
    })
}

4. 使用postcss-pxtorem适配: 与src平级创建postcssrc.js文件(有个.)

// .postcssrc.js
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
      //selectorBlackList: ['van-'] // 使用vant库
    }
  }
}

5. 修改flexible.js

• 找到node_modules下的lib-flexible插件
• 根据需求修改refreshRem方法
• 重启项目

function refreshRem() { 
  var width = docEl.getBoundingClientRect().width;
  if (width / dpr > 540  ) {
       // width = 540 * dpr; // 原先的数据
       width =  width * dpr;
  }
  var rem = width / 10; 
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
} 

• 注: px2rem-loader 与 postcss-pxtorem 一个就成,其余配置一样