简单介绍一下rem和px的换算关系：1rem=html的font-size。
在项目中，我采用postcss-pxtorem+amfe-flexible，
安装：

npm i amfe-flexible
npm i postcss-pxtorem -D

amfe-flexible作用

其实这个插件就是一个js脚本，它会监听项目运行环境的屏幕尺寸，然后给html设置一个font-size。
在项目的入口文件main.js中引入即可
import 'amfe-flexible'

postcss-pxtorem的作用

帮助我们将单位转化为rem
具体的代码如下：
在项目的根路径新建一个postcss.config.js的文件

module.exports = {
  plugins: {
    autoprefixer: {//配置升级的版本号
      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
//设置px转换成rem的基准值，为了方便，ui尺寸是375，我们就设置成375，如果是750，就设置成75。
// 如果为了适配vantui，就配置成50
      propList: ['*'],
    },
  },
};

————————————————
版权声明：本文为CSDN博主「web_zs」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/web_zs/article/details/108218068

postcss-pxtorem适配问题

问题

新项目使用postcss-pxtorem适配，正常情况px会转为rem，本地和测试环境都正常，正式环境部分px没有转为rem，导致ui显示异常

解决

尝试降低postcss-pxtorem版本，原本使用的postcss-pxtorem版本为6.0.0，降低版本到5.1.1之后线上ui正常了。