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

初始化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

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值