Vue中px自动转化成对应的rem

在index.html设置缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0 maximum-scale=1.0, user-scalable=0" />

安装 postcss-px2rem（postcss-px2rem 就是为了让我们直接将代码中px自动转化成对应的rem的一个插件）

npm i postcss-px2rem  -S

由于Vue Cli3及以后的版本省去了可见的配置项,需要自己在根目录(也就是package.json同级目录)下新建vue.config.js文件，配置完毕后不要忘记重启 vue 项目哦，不然无法生效

module.exports = {
    
    
    lintOnSave: false,
    publicPath:'./', 
    css: {
    
    
        loaderOptions: {
    
    
          postcss: {
    
    
            plugins: [
              require('postcss-px2rem')({
    
    
                remUnit: 75, 
                remPrecision: 2, // 代表 remUnit 的 2 倍，一般可以不写
              })
            ]
          }
        }
    },
}

remUnit: 75：代表 1rem = 75px，所以当你的值为75px时，它会自动转成 (75/75)rem，也就是1rem;
remPrecision: 2： 代表 remUnit 的 2 倍，一般可以不写