首页 > 开发 > HTML > 正文

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

2017-09-09 13:30:16  来源: 网友分享

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';