自适应rem布局

自适应处理：

• 使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果
• 一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-size

假设

• 设计稿是宽750px来做的，书写css方便计算考虑，根节点的font-size假定为100px，得出设备宽为7.5rem。
• 设计稿中标注的任何px数值都可以换算成px/100的rem值。就是说，每一个设备的宽度都定为7.5个rem，然后宽度非750px的设备里，就需要用JS对font-size做动态计算。
• 换算关系为：根节点的font-size=设备宽度/7.5。

(function(doc, win) {
    var docEl = doc.documentElement,
    //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
    //监听当前窗口的变化，一旦有变化就需要重新设置根字体的值
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

• orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。
• docEl.clientWidth => document.documentElement.clientWidth =>可见区域宽度(不包括滚动条)
• document.body.clientWidth body对象宽度

element.addEventListener(event, function, useCapture) 事件名，事件触发时执行的函数，false事件句柄在冒泡阶段执行/true事件句柄在捕获阶段执行

DomContentLoaded

DOMContentLoaded所计算的时间，当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件；如果文档中包含脚本，则脚本会阻塞文档的解析，而脚本需要等位于脚本前面的css加载完才能执行。在任何情况下，DOMContentLoaded 的触发不需要等待图片等其他资源加载完

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

1. initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。值为 1.0 即原始尺寸。
2. maximum-scale：允许浏览者缩放到的最大比例，一般设为1.0，即原始尺寸。
3. minimum-scale：允许浏览者缩放到的最小比例，一般设为1.0，即原始尺寸。
4. user-scalable：浏览者是否可以手动缩放，yes 或 no 。