移动端webH5页面开发（rem布局）

之前写H5页面时，虽然也是采用rem布局，但是仍然采用的是媒体查询对根元素进行单独设置，这样不仅麻烦而且设置的时候还不太准确。现在经过改进，直接采用js动态计算，完全不用再去管媒体查询啦。

一、第一种方案（但又欠缺，需要等到dom完成后才执行）

$(function(){
    //初始化html像素
    initHTML();
    $(window).resize(function(event) {
        initHTML();
    });
});


//初始化html像素
function initHTML(){
    //获取当前窗口的高度
    var window_w=$(window).width();

    // 当前屏幕背景图宽度(750为设计图的宽度)
    var now_pic_k=window_w/750*100;

    // 现在html字体的大小
    var now_html_size=now_pic_k;
        document.documentElement.style.fontSize=now_html_size+'px';
}

二、第二种方案，页面加载时就执行（在head标签中加入）

// rem.js
!function() {
    var html = document.documentElement;
    var setFontSize = function() {
        var width = html.offsetWidth;
        if(width <= 750) {
            html.style.fontSize = width / 7.5+ 'px';
        } else {
            html.style.fontSize = 100 + 'px';
        }
    };
    var timer;
    var setDelay = function() {
        return clearTimeout(timer), (timer = setTimeout(setFontSize, 150));
    }
    window.addEventListener('pageshow', function(evt) {
        return evt.persisted && setDelay();
    });
    window.addEventListener('resize', setDelay);
    setFontSize();
}();