(function (doc, win) {
if (!doc.addEventListener) {
return;
}
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) {
return;
}
docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
// 此处设置在375px宽的可视区下,1rem = 20px
};
recalc();
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
网络上大多数人写法如下
<script type="text/javascript">
(function (doc, win) {
if (!doc.addEventListener){
return;
}
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth){
return;
}
docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
// 此处设置在375px宽的可视区下,1rem = 20px
};
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
稍微解释一下上面的代码
document文档对象模型 window浏览器对象模型
document.documentElement.clientWidth 获取可视区的高度
orientationchange:用户改变水平或垂直方向时触发。(浏览器窗口改变大小触发)
DOMContentload:DOM结构加载完毕时触发。
我本人喜欢第一种写法,有没有大神解释一下为什么都用下面这种写法。我个人觉得应该是加载html前就让他font-size改变,而不是等到加载完html之后在改变font-size