javascript - 关于window.onresize+rem布局的问题

问题描述

问 题

1、现在做页面在用rem布局动态获得屏幕宽并根据不同宽度赋值整个页面不同的fontSize值使页面代码如下：

2、 document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

3、现在的问题是屏幕横屏竖屏的时候没办法及时更新页面，需要刷新才可以解决。现在不知道如何使用onresize。求大神解决横屏的问题。

解决方案

var timer = null;
// 事件监听
if ('addEventListener' in document) {
  document.addEventListener('orientationchange', function () {
    setRem();
  }, false);
  window.addEventListener('resize', function () {
    setRem();
  }, false);
}
// 横竖屏时重新调整
function setRem () {
  clearTimeout(timer);
  // 延迟屏幕横竖转换
  timer = setTimeout(function () {
    document.documentElement.style.fontSize = clientWidth / 6.4 + 'px';
  }, 200);
}

document.documentElement.style.fontSize = clientWidth / 6.4 + 'px';
修改为：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

这篇关于javascript - 关于window.onresize+rem布局的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！