基于rem布局

为了让移动端网页在不同尺寸的手机下都可以优雅地展示，可以用媒体查询、百分比布局、弹性布局flex、rem布局等。而rem布局在移动端开发中无疑是一种不错的自适应解决方案，核心就是html根节点的font-size属性和resize事件，以及rem单位。

1、核心思路：当窗口或框架调整大小时会触发resize事件（页面首次加载则模拟触发），此时根据变化后文档的宽度重新计算文档根节点的基础font-size值，那么基于rem单位的DOM元素就会重新计算像素值并重新渲染。

2、关键代码：

/** * 移动页面自适应布局-基于rem布局 * 当屏幕宽度为320px时，1rem代表20px */(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 / 320) + 'px';    };    // 不同浏览器resize事件处理机制不同    // 使用定时器延迟处理resize回调函数以降低重复响应    var recalcTimer = null;    var delaycalc = function() {    win.clearTimeout(recalcTimer);        recalcTimer = win.setTimeout(recalc, 100);    };    // 移动端不需要考虑事件注册函数的兼容性    if (!doc.addEventListener)        return;        win.addEventListener(resizeEvt, delaycalc, false);    // DOMContentLoaded事件只在DOM文档树加载完毕触发，此处不用延迟处理    doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

3、注意要点：

• 触发resize事件的操作：resizeTo 和 resizeBy、横纵屏操作、缩小放大页面窗口、拖动改变页面窗口等引起页面窗口大小改变的操作。
• 在 IE 和 Opera 等浏览器中，只要窗口的边框被改变一个像素，resize事件就会被触发；而在MozillaFirefox等其他浏览器中，只在停止对窗口的大小改变时才触发resize事件【优雅的解决方案——通过setTimeout定时器延迟100ms再执行resize事件。】