1回答

好帮手慕糖

2017-12-19

你好，这是rem布局的核心代码，这段代码的大意是：如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640)；可参考如下理解。

(function(doc, win) {
    var docEl = doc.documentElement,  //  doc是形参，传递的参数是document,等同于docel = document.documentElement
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',  // 这是一个三目运算，orientationchange是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。这里是判断窗口有没有orientationchange这个方法，有就返回orientationchange，没有就返回resize。
        recalc = function() {
            var clientWidth = docEl.clientWidth;  // 获取整个窗口的宽度
            if (!clientWidth) return;  
            if (clientWidth >= 640) {   // 整个窗口的宽度大于等于640px的时候，fontSize为100px，
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);   // 绑定浏览器缩放与加载时间
    doc.addEventListener('DOMContentLoaded', recalc, false);  // 当dom加载完成时，或者 屏幕垂直、水平方向有改变进行html的根元素计算
    recalc();
})(document, window);

祝学习愉快~

2