设置页面字体跟随屏幕大小变化

 (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 = '85px';
                        }else{
                            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                        }
                    };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'

‘orientationchange’ in window
这个是判断在window对象中是否有orientationchange属性,因为orientationchange会遇到兼容性问题,有的浏览器不支持,所以这边做了判断来决定是用orientationchange还是resize(思路就是用resizeEvt这个变量来控制用哪个,后面只要用resizeEvt这个变量来监听屏幕是否被调整,在下面的window.addEventListener(resizeEvt, recalc, false);中用到的就是它)

这里面“?”和“:”是一个if判断。如果问号前面的判断(‘orientationchange’ in window )结果为true则执行冒号前的内容结果为’orientationchange’(同时因为在js中等号的优先级低于三目运算符“?:",所以还会在这之后执行赋值,把’orientationchange’赋值给 resizeEvt 变量),如果为false则得到冒号后的 'resize’并赋值给 resizeEvt。

  1. docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + ‘px’;这一句

在这前面有var docEl = document.documentElement, 这是把获得的根节点赋值给了docEl变量

docEl.clientWidth也就是根节点的当前屏幕宽度,(20/320) 得到的是字体放大或缩小的倍率,之所以取20/320而不是直接除以16是因为:“慕课的布局是右边区域展示,所以按照移动端的320宽度为标准去做适配的”。这个习惯蛮好的,后期变动或者代码移植比较友善,而且便于他人阅读。加px应该不用解释了吧,就是以后自己写代码用到.style.fontSize的时候要注意加上单位

然后docEl.style.fontSize获得的就是根节点的字体大小,"fontSize"是CSS3中的写法,在这个课中讲的是使用rem布局(rem是相对于根元素html的font-size进行计算),所以这步是在动态控制根节点的字体大小。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值