Vue中移动端使用postcss-px2rem和lib-flexible解决自适应

前端页面移动端免不了需要自适应高度宽度字体大小等等，如果直接写rem的话那会很麻烦，前端还需要根据设计图自己去转rem写样式，那样会非常麻烦且不易维护。本文将介绍前端写px像素单位自动转为rem单位。

添加依赖postcss-pxtorem

yarn add postcss-pxtorem 或 nmp install postcss-pxtorem

添加依赖lib-flexible

yarn add lib-flexible 或 npm install lib-flexible

在package.json中添加以下配置

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75,//根据设计图尺寸写，设计图是750，就写75
        "selectorBlackList": [//不进行px转换的选择器
          "van"//表示van框架不转换px
        ],
        "propList": [
          "*"
        ]
      }
    }
  },

在main.js中引入lib-flexible

// rem转换
import 'lib-flexible/flexible.js'

这样前端页面写px实际运行使用的是rem

当然你想某行代码不转换，比如border:1px solid #eee 这样写并转换的话部分机型它是有点问题的，那么你可以直接用1PX(大写)来替换，那么页面显示的就是1PX而不是rem了，那就没有问题了。