改变窗口大小时重新设置 rem时window.onresize失效

爱吃西瓜z

已于 2022-11-23 17:23:28 修改

阅读量1.6k

点赞数 1

文章标签： javascript 前端 css

于 2022-11-23 17:21:36 首次发布

本文链接：https://blog.csdn.net/weixin_45782529/article/details/128003983

版权

初始化font-size的js文件setRem.js如下

// 基准大小
const baseSize = 75
// 设置 rem 函数
function setRem() {
    // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。s
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
    console.log(document.documentElement.style.fontSize)
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    console.log('根字体大小');
    setRem()
}

原因：我本来已经配置好了的，但是开发过程中突然不生效，window.onresize压根不执行，排查发现是我封装的多处组件使用window.onresize导致的

改正：把window.onresize改成window.addEventListener如下

      //错误写法
      // window.onresize = ()=> {
      //   myChart.resize();
      // };
      
      //正确写法
      window.addEventListener("resize", () => {
        myChart.resize();
        //此处写要处理的逻辑代码
      });

总结：在开发中尽量不要多处使用 window.onresize，有看到网上说使用ResizeObserver——把监听事件绑到父元素上，而不是window上，我没用，你们可以试试，教程连接奉上：ResizeObserver - Web API 接口参考 | MDN