rem的使用方式，适配移动端，页面自适应

我们平时的原生开发中常用的单位是px，比较少用rem；但你会发现，很多前端框架里面的单位会用em，或rem。当然我们更多是在需要做页面或端适配的时候来使用这个单位

rem这个单位怎么理解呢？

“font size of the root element” 。 相对于HTML的根元素的大小，目前，除了IE8及更早版本外，所有浏览器均已支持rem。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

说到rem，自然要了解一下em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

好了，回归到rem。之前查资料的时候，发现了很多讲定义的文，这里作为随笔就直接说用法吧。

例如：
我们给根元素的字体大小设置为14px时( font-size:14px)，那么 2rem 就相当于 28px。

html {
    font-size: 14px;
}
p {
    font-size: 1rem;  /* 1rem =14px */
}

这里的rem是用根字体大小来计算的，但是当我们需要设配不同的屏幕大小时，就需要来做区分了：

媒体查询：
根据定好的比例，去设置不同设备的 参考值

@media (min-width:360px) and (max-width:375px){html{font-size:15px!important}}
@media (min-width:376px) and (max-width:384px){html{font-size:15.36px!important}}
@media (min-width:385px) and (max-width:414px){html{font-size:16.56px!important}}
@media (min-width:415px) and (max-width:450px){html{font-size:18px!important}}
@media (min-width:451px) and (max-width:500px){html{font-size:20px!important}}
@media (min-width:501px) and (max-width:550px){html{font-size:22px!important}}
@media (min-width:551px) and (max-width:569px){html{font-size:22.72px!important}}
@media (min-width:569px) and (max-width:640px){html{font-size:25.6px!important}}
@media (min-width:641px) and (max-width:667px){html{font-size:26.68px!important}}
@media (min-width:668px) and (max-width:736px){html{font-size:29.44px!important}}
@media (min-width:738px) and (max-width:768px){html{font-size:30.72px!important}}
@media (min-width:769px) and (max-width:900px){html{font-size:36px!important}}
@media (min-width:901px) and (max-width:1080px){html{font-size:43.24px!important}}

js方法：
动态计算不同屏幕宽度下的参考值
这里是 DOM加载完成时，DOMContentLoaded 事件触发，可能会有闪过的白屏，所以要根据代码的情况去决定用什么方式加载计算

function fun () {
    // 获取移动端屏幕是否翻转
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    // 计算根元素的 font-size 的值，这里是在设计稿为750px的情况下，16px = 1rem；
    var scale = function () {
        var clientWidth =  document.documentElement.clientWidth;
        if (!clientWidth) return;
        document.documentElement.style.fontSize = 16 * (clientWidth / 750) + 'px';
    }
    if (!document.addEventListener) return;
    window.addEventListener(resizeEvt, scale, false);
    document.addEventListener('DOMContentLoaded', scale, false);
};
fun ();

或是直接在header底部去加载这部分代码，并内联到html文档里面

不对的地方，欢迎指正^ _ ^