Vue-cli3 Pc端 px转rem 自适应

1、安装lib-flexible

yarn add lib-flexible

2、安装px2rem-loader

px2rem-loader

 3、修改flexible.js 将540改为width

Vue-cli3 Pc端 px转rem 自适应_第1张图片

4、在main.js中引入lib-flexible

5、配置vue.config.js

chainWebpack: (config) => {
        config.module
            .rule('scss')
            .oneOf('vue')
            .use('px2rem-loader')
            .loader('px2rem-loader')
            .before('postcss-loader') 
            .options({ remUnit: 192, remPrecision: 8 })
            .end();
  }

其中 remUnit 为设计稿的宽度/10 remPrecision 为空值rem计算的精度值

6、重启项目即大功告成

 

你可能感兴趣的:(vue,vue.js,前端,sass,less,css3)