Web移动端布局

说到移动端，不得不提适配问题，因为现如今市面上移动设备的分辨率大小不同，显然咱们常用的px单位在这个时候就有些不太灵光了，为此，css3出了一个新单位——rem，rem是移动端神器，它完美解决了分辨率的适配问题。

rem是根据HTML根目录font-size的大小为基准

<meta name="viewport" content="width=device-width,Initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

用JS获得当前屏幕的分辨率，然后动态的给HTML

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