移动端H5网页的rem适配方案

移动端网页重构

以常见的移动端网页设计规范为例，设计稿尺寸一般为750*1334。为了使网页在各类型的手机设备中正常显示，常使用rem来进行布局，使其能自适应各类显示屏。

rem特点

• rem相对于html元素字体大小来说的
• rem的优点是可以通过修改html里面的文字大小来改变页面中元素的大小 可以整体控制

因此可以通过js获取不同设备的宽高，动态设置html的文字大小。

//此js需置于html文件顶部
(function (win, doc) {
    if (!win.addEventListener) return;
    var html = document.documentElement;

    function setFont() {
        var html = document.documentElement;
        var k = 750;
        html.style.fontSize = html.clientWidth / k * 100 + "px";
    }
    setFont();
    setTimeout(function () {
        setFont();
    }, 300);
    doc.addEventListener('DOMContentLoaded', setFont, false);
    win.addEventListener('resize', setFont, false);
    win.addEventListener('load', setFont, false);
})(window, document);

当页面加载完毕，可视窗口大小变化时，都会触发html的字体大小重算。保证页面始终与设计稿一致。

用法

例如设计稿顶部为一个700px居中的banner图，则css代码如下

.banner{
	width:7rem;
	height:1rem;
	margin:0 auto;
	background: url(...)
}