rem布局以及rem自适应js

一、rem概念

rem（font size of the root element）是指相对于根元素的字体大小的单位，简单的说它就是一个相对单位。

看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。

它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

二、 rem.js

//rem自动计算
(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);

三、使用(单位换算100px==1rem)

把rem.js放到公共js文件夹，哪个页面需要则引入。