postcss-pxtorem 的使用 解决vant的样式也被rem格式化的问题

在h5适配端， 常见的解决方案是使用postcss-pxtorem，将px转化为rem格式， 但是vant中的样式也被格式化，导致与显示屏样式不一致。

解决方案是隔离vant中的class， 发现其中样式以van- 开头， 在postcss.config.js 中, 增加黑名单。

module.exports = {
  plugins: {
    'autoprefixer': {},
    'postcss-pxtorem': {
      propList: ['*'],
      selectorBlackList:[
        'van-'
      ],
      rootValue
    },
  }
}

后续

如果忽略了vant样式的rem适配，还是会导致兼容问题， 在这里可以将ui的设计稿底图设为和vant一样的底稿，整体缩小一倍去写样式，即375px的宽度，在保证设计稿与vant一致的时候再做兼容。

此时将postcss.config.js 中 rootValue设为100即可。