能帮我解释一下这个代码吗？
来源：3-1 header响应式布局（1）
艾华生
2018-10-12 14:38:30
如果以后做响应式的移动端网页，是不是可以直接把这串代码复制在js文件里就行了，然后再改下自己尺寸就行了？但我不太理解这些代码。谢谢~辛苦
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 640) {
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);
recalc();
})(document, window);
2回答
-
好帮手慕星星
2018-10-12
做移动端适配，直接复制这段代码就可以了，不需要自己写。
1、这段代码是理解执行函数，参数中传入了document和window。
var docEl = doc.documentElement,是获取了页面文档元素并赋值给了docEL变量。
2、resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',这是一个三元运算符，然后将结果赋值给resiseEvt变量。
orientationchange in window 这个是判断在window对象中是否有orientationchange事件（屏幕翻转，是横屏还是竖屏），因为orientationchange会遇到兼容性问题，有的设备不支持。如果设备不支持就使用resize事件（对浏览器窗口大小进行计算，当浏览器窗口大小发生变化时触发）。
3、下面是rem布局的核心代码，这段代码的大概意思是：如果页面的宽度超过了640px，那么页面中html的font-size值恒为100px，否则，页面中html的font-size值为：100*（当前页面宽度/640）
对于手机屏幕来说，640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。
4、下面就是执行监听事件：
如果页面没有addEventListener监听事件的方法就返回
如果有浏览器就执行上面接收的resizeEvt变量，也就是屏幕翻转或者是浏览器窗口缩小时，然后计算页面font-size的大小。
页面执行DOMContentLoaded事件，就是当dom结构加载成功时，计算页面font-size 的大小。
最后单独执行一下计算页面中font-size大小的方法。
祝学习愉快~~
0 -
好帮手慕糖
2018-10-12
你好，这个是移动端页面适配的，可以结合如了解，例：
若能帮助到你，望采纳。
祝学习愉快！
0
相似问题