详解H5 活动页之移动端 REM 布局适配方法

我来详细讲解一下“详解H5 活动页之移动端 REM 布局适配方法”的攻略。

一、什么是REM布局适配方法

移动端REM布局适配方法是一个基于CSS3的相对单位rem来实现页面的自适应和响应式效果。它的核心思想是将屏幕分成若干等份，然后根据屏幕的宽度动态设置每个元素的字体大小。这样可以使网页在不同的设备上自动适应，不管是手机、平板还是PC，都能够保持良好的显示效果。

二、REM布局适配方法的实现步骤

第一步：设置HTML的字体大小

html {
    font-size: 16px;
}

在这里，我们将html元素的字体大小设置为16px。这个值可以根据具体情况进行调整，建议在12-16之间进行选择。

第二步：使用rem单位进行布局

.box {
    width: 6.4rem;
    height: 3.2rem;
    font-size: 0.24rem;
}

在这里，我们使用rem单位进行布局，而不是常见的px。这样，每个元素的尺寸都会随着屏幕的宽度动态调整，从而实现自适应和响应式的效果。

第三步：使用JavaScript动态改变HTML的字体大小

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

在这里，我们使用JavaScript动态改变HTML的字体大小。这是因为在不同的设备上，屏幕的宽度是不一样的，直接设置为固定的值可能会导致布局失效。因此，我们需要在JavaScript中通过获取屏幕的宽度来动态设置字体大小。

三、使用REM布局适配方法的示例说明

示例1：在移动端显示图片

<div class="box">
    <img src="example.jpg" width="100%" height="100%">
</div>

在这里，我们将图片宽度和高度设置为100%，并将其包裹在一个大小为6.4rem x 3.2rem的div中。这样，无论屏幕的大小如何，图片都能够完美地显示出来。

示例2：在移动端显示一段文字

<div class="box">
    <p>这是一段文字，可以根据屏幕的大小进行动态调整。</p>
</div>

在这里，我们将文字封装在一个大小为6.4rem x 3.2rem的div中。由于我们在第二步中已经将字体大小设置为0.24rem，因此这段文字会根据屏幕的大小进行动态调整，并且始终保持良好的显示效果。

四、总结

通过REM布局适配方法，我们可以非常方便地实现页面的自适应和响应式布局。在实际开发过程中，我们可以根据具体情况进行调整，从而达到最佳的效果。