(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
1.var docEl=doc.documentElement----返回文档的根节点
2.resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’
orientationchange----是在用户水平或者垂直翻转设备(即方向发生变化)时触发的事件。这里是判断窗口有没有orientationchange这个方法,有就返回orientationchange,没有就返回resize。
orientationchange的具体描述
3. var clientWidth = docEl.clientWidth----获取整个窗口的宽度
4. docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px’;------iphone4宽度是320px,那么font-size就是20px, 100px就是5rem;iphone6宽度是375px,那么font-size就是23.4375px,100px就是4.267rem
5. win.addEventListener(resizeEvt, recalc, false);------绑定浏览器缩放与加载时间
6. doc.addEventListener(‘DOMContentLoaded’, recalc, false)当dom加载完成时,或者 屏幕垂直、水平方向有改变进行html的根元素计算
这篇文章更好一点,放上链接 https://blog.csdn.net/qq_43209768/article/details/93617137