1回答

好帮手慕星星

2019-02-20

你好，可以参考下面的注释：

(function(doc, win) { //定义一个函数 参数为（doc,win）

var docEl = doc.documentElement,
//1、将document传入参数为doc document.documentElement是什么意思？
//(document.documentElement获取的是html元素)
//2、document指的是哪个？
//(document指的是整个文档结构)

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
//orientationchange当设备的方向发生变化时会触发该事件
//3、定义resizeEvt=设备方向发生改变是否在window？是就触发orientationchange事件,不是就调整视窗大小？
//(这行代码的意思是浏览器是否支持orientationchange事件，如果支持就出发orientationchange事件，如果不支持就触发resize事件)
//4、resize是css属性还是js的resize（） 方法？
//(resize是js中的事件，不是css属性)
//5、window指的是什么？
//（指的是浏览器window对象啊，在js BOM基础中讲过）

recalc = function() {
var clientWidth = docEl.clientWidth;
//6、获得document.documentElement的宽度？
//(获取的是浏览器视口的宽度，可以在控制台中输出看看)

if (!clientWidth) return;
//7、这句是什么意思？（如果没有获取到宽度，直接返回，不执行下面的代码）

if (clientWidth >= 640) {
docEl.style.fontSize = '100px'; //设置document.documentElement的字体大小为100px
} else {
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
//8、这里计算rem的思路是什么？
//(对于手机屏幕来说，640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。所以在小于640px的时候改变html的font-size属性值。100*（可见区域宽度/640）+‘px’。这是页面宽度小于640px的一个计算公式，记住就可以了。)
}
};

if (!doc.addEventListener) return;
//9、这句是什么意思？没有监听到document.documentElement 返回？不懂什么意思？
//(如果页面不支持事件监听，直接返回)
win.addEventListener(resizeEvt, recalc, false);
//10、监听什么事件？false是捕获行为吗？有什么作用？
//(resizeEvt就是上面‘ resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',’接收的事件，拿orientationchange事件举例，这行代码的意思是窗口监听orientationchange事件，执行上面的recalc方法，第三个参数默认是false，在冒泡阶段执行)
doc.addEventListener('DOMContentLoaded', recalc, false);
//11、监听什么事件？false是捕获行为吗？有什么作用？
//(当初始HTML文档已完全加载和解析时，将触发DOMContentLoaded事件，然后调用上面的recalc方法，默认在冒泡阶段执行)
recalc();
//12、引用recalc函数吗？（先调用一次上面的方法）
})(document, window);
//13、将document和window传入函数 document和window有什么不同？指的是什么？
//（window 指窗体，document指页面，document对象可以理解为是window对象的一个子对象。）

如果有疑问，可以继续提问。

祝学习愉快！

0