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

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

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

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

阅读 3.8k
1 个回答
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';

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题