移动端rem设置（部分安卓机型不兼容）

最新推荐文章于 2025-01-09 09:42:00 发布

转载最新推荐文章于 2025-01-09 09:42:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gzh529/p/8336953.html

文章标签：

#移动开发 #javascript #ViewUI

本文介绍了一种使用REM单位实现响应式布局的方法。通过JavaScript监听窗口大小变化并调整根元素字体大小，使得页面元素能够根据屏幕宽度自动缩放，适用于不同尺寸的设备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(function(win) {
      var doc = win.document;
      var docEl = doc.documentElement;
      var tid;
      function refreshRem() {
          var width = docEl.getBoundingClientRect().width;
          if (width > 640) { // 最大宽度
              width = 640;
          }
          var rem = width / 10; // 将屏幕宽度分成10份， 1份为1rem
          docEl.style.fontSize = rem + 'px';
      }
      win.addEventListener('resize', function() {
          clearTimeout(tid);
          tid = setTimeout(refreshRem, 300);
      }, false);
      win.addEventListener('pageshow', function(e) {
          if (e.persisted) {
              clearTimeout(tid);
              tid = setTimeout(refreshRem, 300);
          }
      }, false);
      refreshRem();
      console.log(docEl.style.fontSize)
})(window);

转载于:https://www.cnblogs.com/gzh529/p/8336953.html