rem和em

rem和em是一个相对单位

不同的是rem相对于根元素html的font-size，而em是相对于元素的父元素的font-size进行计算的，默认浏览器大小是16px，按照转换关系1rem=16px。

使用rem，为了兼容不同浏览器的分辨率，我们需要动态改变根元素的字体大小

var docEl = document.documentElement,
    //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
    //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        //设置根字体大小
        docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'
    };

//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);