移动端 html 布局中如何实现动态 rem

移动端 HTML 布局中实现动态 rem 主要依赖于 JavaScript 动态设置根元素（即 html 元素）的字体大小。在不同屏幕宽度下，根据设定的基准宽度和实际屏幕宽度的比例调整根元素的字体大小，从而达到整个页面缩放的效果。这种方式能够很好的适应不同分辨率的屏幕，使得页面元素大小的变化更加统一和协调。

一、动态 rem 计算公式

为了实现动态 rem，需要一个计算公式来确定根元素的字体大小。该公式通常以设计稿的宽度作为基准，然后根据实际设备的屏幕宽度与设计稿宽度的比例来确定根元素的字体大小。这个计算过程需要在页面初次加载时执行，并在屏幕尺寸变化时更新。

通过 JavaScript 实现，例如，假定设计稿宽度为750px，可以设定基准字体大小为100px，那么计算公式为：

document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) * 100 + 'px';

当设备宽度变化时，字体大小也会相应地调整。

二、基本实现原理

动态计算 rem 的大小依赖于视口宽度。使用 viewport 单位（vw、vh）来捕捉设备宽度，通过 JS 计算出适当的字体大小为 html 元素赋值，进而影响页面布局中使用 rem 单位的元素。这种适配方法可以灵活应对不同设备屏幕尺寸带来的挑战。

在屏幕大小发生变化或者设备旋转时，通过监听 resize 或 orientationchange 事件来动态调整字体大小，确保布局的一致性和响应性。

三、页面加载时设置 rem

页面加载时是设置动态 rem 的关键时刻。在这个时候，通过 JS 获取当前设备的屏幕宽度并根据宽度计算根元素的字体大小是非常重要的。针对这一点，可以在页面的 head 标签中或者 body 标签最前面使用 script 标签，以最快执行 JS 代码来避免布局跳动。

示例代码可能如下：

(function(doc, win) {
  var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function() {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
      };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

这段代码在 DOMContentLoaded 事件触发时，以及屏幕尺寸变化时，都会重新计算根元素的字体大小。

四、响应屏幕尺寸变化

为了应对屏幕尺寸的变化，如设备由横屏变为竖屏，或者窗口大小调整等情况，需要通过事件监听器来动态调整。通过在 resize 事件或 orientationchange 事件触发时重新计算，可以保证页面元素能够持续保持适配。

五、实践中的考虑

实际应用中，除了基本的 rem 计算和设置之外，还需要考虑一些特殊情况。例如最小字体限制问题，在一些老旧设备上，浏览器可能会有最小字体限制，这可能会影响到 rem 的正常显示。因此，需要在样式中适当处理，并在 JS 计算时可能需要设置一个最小字体大小。

另外，考虑到性能问题，可以防抖或节流 resize 事件的处理函数，避免频繁计算导致的性能问题。代码示例如下：

function debounce(func, wAIt, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
window.addEventListener('resize', debounce(function(){ 
    document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) * 100 + 'px';
}, 250));