三步搞定vue-cli3适配分辨率方案px转rem

在vue3-CLI搭建环境中对于屏幕分辨率适配可以采用postcss-pxtorem和lib-flexible这两个插件配合使用!

不废话直接上干货

第一步安装插件

cnpm install lib-flexible postcss-pxtorem --save

第二步在main.js文件中引入

import 'lib-flexible/flexible.js'

第二步在package.json文件中引入

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 37.5,// 设计稿宽度或者目前正常分辨率的1/10
        "propList": [
          "*"
        ]// 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
      }
    }
},