移动端rem原理

rem和em一样是个相对单位

em相对与当前元素字体大小

rem的r代表root，相对于根元素字体的大小，网页中根元素是html

一般浏览器html默认字体大小是16px，所以1rem等于16px，2rem等于32px

.box {
    width: 1rem;
    height: 1rem;
    background: red;
}

当设置根元素字体大小为100px时，1rem等于100px

html {
    font-szie: 100px;
}

在移动端设计图一般750px，当移动端宽750px时，设置根元素字体大小100px，这样100px的宽度就就可以写成1rem

因为移动端有各种不同的宽度，我们需要在页面宽度发生变化时动态改变html字体的大小，那么用rem单位作为元素的宽，这个宽度就是响应式的（字体大小变化，这个宽度就会变化）。

比例关系是这样的

 

当前页面宽可以获取等于document.innerWidth

html字体大小 = （100*当前页面宽）/750

这时页面宽度变化，html的字体大小就会变化，1rem的大小也会相应改变

代码：

(function () {
    var doc = document,
        win = window,
        oBody = doc.documentElement || doc.body,
        resize = "onorientationchange" in win ? "orientationchange" : "resize";
    rem();
    addEventListener("resize", rem, false);
    function rem() {
        oBody.style.fontSize = 100 * (doc.body.clientWidth / 750) + "px";
    }
})()