目标: 切换不同机型, ==刷新后==看看标签大小适配吗

• postcss – 配合webpack翻译css代码
• postcss-pxtorem – 配合webpack, 自动把px转成rem
• 新建postcss.config.js – 设置相关配置
• 重启服务器, 再次观察Vant组件是否适配

1. 下载postcss和==postcss-pxtorem@5.1.1==

   postcss作用: 是对css代码做降级处理

   postcss-pxtorem: 自动把所有代码里的css样式的px, 自动转rem

2. src/新建postcss.config.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
      // 例如一个元素宽是75px，则换成rem之后就是2rem。
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

==以iphone6为基准, 37.5px为基准值换算rem==

自动转换设置

postcss-pxtorem

对插件的使用

rootValue({file}){
    return file.indexOf('vant') !== -1 ? 37.5:75
}

如果是使用的 vant 组件，就是用 37.5px 为基数

如果是自己设计的组件，使用设计稿的 75px 为基数