为了账号安全,请及时绑定邮箱和手机立即绑定

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

 docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';

可以详细解释一下上面两段代码的意思吗?

正在回答

6 回答

找了半天终于在您明白了,感谢~

0 回复 有任何疑惑可以回复我~

1.   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。

2.   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进行计算),所以这步是在动态控制根节点的字体大小。

补充:课程地址https://www.imooc.com/code/10547


6 回复 有任何疑惑可以回复我~

这是从哪个项目看到的呢?

    

0 回复 有任何疑惑可以回复我~

上面一句是三元运算符,判断窗口有没有orientationchange方法,true表示是冒号前面orientationchange;false是'resize';下面的是改变字体尺寸,由rem转换成px;1rem=16px



0 回复 有任何疑惑可以回复我~
#1

April_1st

rem转换成px 不是应该乘以16 +“px”么??
2016-09-29 回复 有任何疑惑可以回复我~
#2

慕运维5015124 回复 April_1st

/16+'px'
2016-10-18 回复 有任何疑惑可以回复我~

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

获取浏览器支持的改变方向的函数,如果'orientationchange'存在,就使用这个

docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';

改变字体的尺寸


2 回复 有任何疑惑可以回复我~

第一段是判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。

第二段是把document的fontSize大小设置成跟窗口成一定比例的大小,从而实现响应式效果。

5 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信