rem屏幕自适应配置

最新推荐文章于 2024-07-10 09:54:31 发布

原创最新推荐文章于 2024-07-10 09:54:31 发布 · 323 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #rem

收录于

vue 同时被 2 个专栏收录

121 篇文章

订阅专栏

rem

2 篇文章

订阅专栏

该博客介绍了一段JavaScript代码，用于实现响应式布局的屏幕适配。通过监听窗口大小变化及DOMContentLoaded事件，动态调整html元素的字体大小，从而在不同尺寸的设备上保持页面比例的一致性。主要针对375像素和414像素两种屏幕宽度进行了设置。

rem.js屏幕自适应配置

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      let clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth > 375) {
        docEl.style.fontSize = 100 * (414 / 750) + 'px';
      } else {
        docEl.style.fontSize = 100 * (375 / 750) + 'px';
      }
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);