根据设备分辨率更改根字体大小

最新推荐文章于 2024-05-17 14:33:55 发布

转载最新推荐文章于 2024-05-17 14:33:55 发布 · 2.5k 阅读

本文介绍了一种使用JavaScript动态调整根元素字体大小的方法实现rem布局，使网页能够自适应不同分辨率的移动设备。通过监听窗口尺寸变化及方向改变事件，确保在横竖屏切换时也能保持良好的视觉效果。

rem布局，根据设备分辨率更改根字体大小

  (function (win, doc) {
  
    change();
    
    function change() {
      doc.documentElement.style.fontSize = doc.documentElement.clientWidth * 20 / 320 + 'px';
    }

    win.addEventListener('resize', change, false);
    
    /* 这个是移动端设备横屏、竖屏转换时触发的事件处理函数 */
    win.addEventListener('orientationchange', change, false);
    
  })(window, document);