移动端rem适配

vue-cli3用rem进行适配步骤

1. 安装手淘的flexible,插件名称叫amfe-flexible

   npm i amfe-flexible --save-dev
   

npm i postcss-pxtorem

2. 在main.js导入

   import 'amfe-flexible'
   

3. 在/vue.config.js添加px2rem插件,把项目中的px转为rem

   const autoprefixer = require("autoprefixer");
   const pxtorem = require("postcss-pxtorem");
   const path = require("path");
   
   const themePath = path.resolve(__dirname, "src/assets/style/theme.less");
   
   module.exports = {
     // 关闭eslint检查
     lintOnSave: false,
     // 配置css前缀,px转rem
     css: {
       loaderOptions: {
   
         // vant换主题
         less: {
           modifyVars: {
             hack: `true; @import "${themePath}";`
           }
         },
           // 后处理器配置
         postcss: {
           plugins: [
             // 配置样式前缀
             autoprefixer(),
             // 把px转为rem
             pxtorem({
               rootValue: 37.5,
               propList: ["*"]
             })
           ]
         }
       }
     },
   
     configureWebpack: {
       externals: {
         axios: "axios" // 配置使用CDN
       }
     }
   };
   

http://huruqing.cn/docs/Vue/advance/06.rem.html