next框架结合lib-flexible,postcss-pxtorem做pc端rem适配

安装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


解决方法:
修改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

你可能感兴趣的:(react)