亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

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進行計算),所以這步是在動態控制根節點的字體大小。

補充:課程地址http://www.xianlaiwan.cn/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下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號