h5页面基础：自适应移动端

给h5页面布局前，先在body底部引入rem.js，来自适应不同分辨率的屏幕。

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth > 750? 750:docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 375) + "px");
        };

    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);

}(document, window));

获取当前的屏幕宽，初始化根元素的字体大小，以rem为单位进行布局，页面中的元素大小会随着根元素字体大小变化而变化。 当屏幕宽为375px，根元素字体大小为20px。 以750px的设计稿为例，页面中有一个高为100px的div，则它的高度为 100/2/20 = 2.5rem
2017.06.07 补充: 实际项目中发现，当手机旋转为横屏时，resize代码在dom元素未渲染前已执行，需要延迟，该部分代码替换为：

win.addEventListener(evt, function(){
    fn();
    setTimeout(fn,50);
}, false);
doc.addEventListener("DOMContentLoaded", function(){
    fn();
    setTimeout(fn,50);
}, false);