安装lib-flexible，postcss-pxtorem
yarn add lib-flexible
yarn add postcss-pxtorem
配置postcss-pxtorem
在根目录下建立postcss.config.js文件
const pxtorem = require("postcss-pxtorem");
module.exports = {
plugins: [
pxtorem({
rootValue: 136,//我这里配置的是我1366分辨率下的基准值，会在下面解释
unitPrecision: 5,
propList: ["*"],
selectorBlackList: [/^\.nop2r/, /^\.am/,'html'],
//排除antd样式，由于我给html设置了min-width，所以把html也排除在外不做rem转换
replace: true,
mediaQuery: false,
minPixelValue: 0
})
]
}
配置lib-flexible
正常情况下我们在app.js中import ‘lib-flexible’就可以实现引入，但我在引入后启动项目，一直在报window is not defined，研究了很久才找到解决方法。
const setRem = async ()=>{
await require('lib-flexible')
}
useEffect(()=>{
setRem()
window.addEventListener('resize',setRem)
})
终于没有报错了！
在这种情况下适配移动端已经没问题了，可是pc端屏幕情况下用控制台查看元素，发现font-size一直是54px
<html data-dpr="1" style="font-size: 54px;">
解决方法：
修改node_modules\lib-flexible\flexible.js文件的refreshRem，可见原代码中width / dpr > 540的情况下默认不随width改变，我们把这段代码修改如下：
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
最后
根据设计图以及开发情况下的分辨率，修改postcss-pxtorem.js文件的rootValue值，正常是 分辨率宽/10