vue-cli3移动端px转rem适配方案

1,732 阅读1分钟

在vue3-CLI搭建环境中对于移动端适配中可以采用postcss-pxtoremlib-flexible这两个插件配合使用

  • 1.在node安装插件 cnpm install lib-flexible postcss-pxtorem --save
  • 2.在main.js 文件中引入 import 'lib-flexible/flexible.js',在package.json文件中引入
"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 37.5,// 设计稿宽度的1/10
        "propList": [
          "*"
        ]// 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
      }
    }
},

tips

json后缀结尾的文件不允许有注释,上面只是代码中的注释只是方便查看。