安裝lib-flexible，postcss-pxtorem
1 yarn add lib-flexible 2 yarn add postcss-pxtorem
配置postcss-pxtorem
在根目錄下建立postcss.config.js文件
1 const pxtorem = require("postcss-pxtorem"); 2 module.exports = { 3 plugins: [ 4 pxtorem({ 5 rootValue: 136,//我這里配置的是我1366分辨率下的基准值，會在下面解釋 6 unitPrecision: 5, 7 propList: ["*"], 8 selectorBlackList: [/^\.nop2r/, /^\.am/,'html'], 9 //排除antd樣式，由於我給html設置了min-width，所以把html也排除在外不做rem轉換 10 replace: true, 11 mediaQuery: false, 12 minPixelValue: 0 13 }) 14 ] 15 }
配置lib-flexible
正常情況下我們在app.js中import ‘lib-flexible’就可以實現引入，但我在引入后啟動項目，一直在報window is not defined，研究了很久才找到解決方法。
1 const setRem = async ()=>{ 2 await require('lib-flexible') 3 } 4 useEffect(()=>{ 5 setRem() 6 window.addEventListener('resize',setRem) 7 })
終於沒有報錯了！
在這種情況下適配移動端已經沒問題了，可是pc端屏幕情況下用控制台查看元素，發現font-size一直是54px
1 <html data-dpr="1" style="font-size: 54px;">
解決方法：
修改node_modules\lib-flexible\flexible.js文件的refreshRem，可見原代碼中width / dpr > 540的情況下默認不隨width改變，我們把這段代碼修改如下：
1 function refreshRem(){ 2 var width = docEl.getBoundingClientRect().width; 3 if (width / dpr > 540) { 4 width = width * dpr; 5 } 6 var rem = width / 10; 7 docEl.style.fontSize = rem + 'px'; 8 flexible.rem = win.rem = rem; 9 }
最后
根據設計圖以及開發情況下的分辨率，修改postcss-pxtorem.js文件的rootValue值，正常是 分辨率寬/10