rem布局 2 JS方法的简单实现

(function (doc, win) {
        var docEl = doc.documentElement,
/*
           document.documentElement
           返回文档的根节点
         * orientationchange 在用户移动端设备屏幕垂直或水平旋转移动设备时被触发
         * resize 事件，在绑定元素大小发生变化时触发该事件，例如检测屏幕变化：
         * window.addEventLisenter("resize",function(){
         *      alert("屏幕大小变化了")
         * })
         *
         * resize 属性，css3新增属性，用来指定用户是否可以缩放该元素
         * none:用户无法调整该元素尺寸
         * both：用户可以调整元素的高度和宽度
         * horizontal：用户可调整元素的宽度
         * vertical:用户可调整元素的宽度
         * */
            resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (clientWidth >= 640) {
                    clientWidth = 640
                }
                if (!clientWidth) return;

                docEl.body.style.fontSize = (clientWidth / 640) * 100 + "px";
            };
        win.addEventListener("resizeEvt", recalc, false);
/*
          * DOMContentLoaded 该事件会在load事件之前触发，在DOM树构建完成时就触发
          * 而load事件则是在DOMContentLoaded事件触发之后，继续加载图片等外部文件完成后触发
          * */
        doc.addEventListener("DOMContentLoaded", recalc, false)
    })(document, window)