移动端适配 postcss-pxtorem插件使用

一、是什么？

将px转化成rem的插件 github地址

二、为什么？

解决移动端多种机型适配问题

三、如何安装使用

• npm安装 

npm i postcss-pxtorem@5.1.1

 配置postcss.config.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 50 : 144;  // 设计稿尺寸是1080，但是vant的尺寸是对应375
      },
      mediaQuery: false,
      minPixelValue: 2,
      propList: ['*']
    }
  }
}

•  html根元素设置

  html{
    height: 100vh;
    font-size: 13.33vw;// 设计稿尺寸1080,移动端ui组件vant尺寸375，1vw = 375/100, 50px = 50/3.75,1080对应就是 1080/375 * 50/3.75 = 144
  }