js rem

Rem 介绍

css 中的 rem 单位和 em 很像，不过后者的参照物是距离元素最近的父元素的 font-size，前者的参照物是 html 根元素的 font-size。

实现原理

通过js快速获取页面宽度后，通过换算动态设置 html 的 font-size，来达到适配不同屏幕大小的手机。为了避免页面元素闪烁，必须要在页面css渲染之前完成计算，所以要将计算代码放到 head 的样式引用之前。

代码实现

// 手机端自动判断 rem
<script type="text/javascript">
(function() {
    var b = document.documentElement,
    a = function() {
        var a = b.getBoundingClientRect().width;
        var a = a < 640 ? a : 640;
        b.style.fontSize =( .0375 * a) + "px";
    },
    c = null;
    window.addEventListener("resize",
    function() {
        clearTimeout(c);
        c = setTimeout(a, 300);
    });
    a();
})();
</script>

压缩

<script type="text/javascript">(function(){var b=document.documentElement,a=function(){var a=b.getBoundingClientRect().width;var a=a<640?a:640;b.style.fontSize=(0.0375*a)+"px"},c=null;window.addEventListener("resize",function(){clearTimeout(c);c=setTimeout(a,300)});a()})();</script>