让Rem带你畅游多屏世界——H5页面适配器的实现H5页面适配器的实现随着科技的发展，移动设备也在不断的更新迭代，为了确

H5页面适配器的实现

随着科技的发展，移动设备也在不断的更新迭代，为了确保H5页面可以在不同设备上都有一个很好的显示。我们需要一个适配器来动态调整页面元素的尺寸，下面我们将详细介绍如何创建一个基于rem单位的适配器，它可以根据屏幕的宽度自动调节跟元素（html）的字体大小，实现页面无差别体验。

实现原理

设定标准：根据设计稿的宽度（如：750px），选择一个合适的rem值对应原本像数值。
- 大多数浏览器里面，初始 1rem = 16px，默认根元素的字体大小为16px。
- 如果希望1rem等于75px，则需要设定font-size为75px。
动态计算：根据当前屏幕宽度，适配器重新计算html标签的font-size大小，保证在不同的设备上页面元素比例大小不变。
响应式支持：通过JavaScript里面提供的监听事件，来监听窗口大小变化，并做出相应的html标签font-size的调整。

实现过程

适配器实现代码：

    (function(){
        function calc(){
            const width = document.documentElement.clientWidth; // 获取窗口宽度
            document.documentElement.style.fontSize = width/10 + 'px'; // 实际值(px) = 10(rem) 
        }
        calc();
        // 监视窗口变化 resize窗口改变事件
        window.addEventListener('resize',function(){
            calc();
        })
    })

换算公式：

假设设计稿宽度为750px，我们可以通过以下公式来确定根元素的字体大小：
- html-font-size = 设计稿宽度 / 期望的rem总值 = 750 / 10 = 75px。
- 这意味着，在750px宽的设计稿中，如果一个元素的宽度被定义为1rem，那么它的实际宽度将是75px。
验证图：

总结

通过上述方法，可以创建一个既美观又实用的相应式H5页面。通过rem作为单位不仅简化了适配过程，还提高了代码的维护性和扩展性。同时，给予了用户在不同设备上拥有无差体验。