resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
? resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
?docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
可以詳細(xì)解釋一下上面兩段代碼的意思嗎?
? resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
?docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
可以詳細(xì)解釋一下上面兩段代碼的意思嗎?
2015-12-23
舉報(bào)
2018-01-23
找了半天終于在您明白了,感謝~
2017-12-24
1. ? resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
'orientationchange' in window 這個(gè)是判斷在window對(duì)象中是否有orientationchange屬性,因?yàn)閛rientationchange會(huì)遇到兼容性問題,有的瀏覽器不支持,所以這邊做了判斷來決定是用orientationchange還是resize(思路就是用resizeEvt這個(gè)變量來控制用哪個(gè),后面只要用resizeEvt這個(gè)變量來監(jiān)聽屏幕是否被調(diào)整,在下面的window.addEventListener(resizeEvt, recalc, false);中用到的就是它)
這里面“?”和“:”是一個(gè)if判斷。如果問號(hào)前面的判斷('orientationchange' in window )結(jié)果為true則執(zhí)行冒號(hào)前的內(nèi)容結(jié)果為'orientationchange'(同時(shí)因?yàn)樵趈s中等號(hào)的優(yōu)先級(jí)低于三目運(yùn)算符“?:",所以還會(huì)在這之后執(zhí)行賦值,把'orientationchange'賦值給?resizeEvt 變量),如果為false則得到冒號(hào)后的?'resize'并賦值給?resizeEvt。
2. ? docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';這一句
在這前面有var docEl = document.documentElement,?這是把獲得的根節(jié)點(diǎn)賦值給了docEl變量
docEl.clientWidth也就是根節(jié)點(diǎn)的當(dāng)前屏幕寬度,(20/320) 得到的是字體放大或縮小的倍率,之所以取20/320而不是直接除以16是因?yàn)椋骸澳秸n的布局是右邊區(qū)域展示,所以按照移動(dòng)端的320寬度為標(biāo)準(zhǔn)去做適配的”。這個(gè)習(xí)慣蠻好的,后期變動(dòng)或者代碼移植比較友善,而且便于他人閱讀。加px應(yīng)該不用解釋了吧,就是以后自己寫代碼用到.style.fontSize的時(shí)候要注意加上單位
然后docEl.style.fontSize獲得的就是根節(jié)點(diǎn)的字體大小,"fontSize"是CSS3中的寫法,在這個(gè)課中講的是使用rem布局(rem是相對(duì)于根元素html的font-size進(jìn)行計(jì)算),所以這步是在動(dòng)態(tài)控制根節(jié)點(diǎn)的字體大小。
補(bǔ)充:課程地址http://idcbgp.cn/code/10547
2017-04-13
這是從哪個(gè)項(xiàng)目看到的呢?
????
2015-12-25
上面一句是三元運(yùn)算符,判斷窗口有沒有orientationchange方法,true表示是冒號(hào)前面orientationchange;false是'resize';下面的是改變字體尺寸,由rem轉(zhuǎn)換成px;1rem=16px
2015-12-23
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
獲取瀏覽器支持的改變方向的函數(shù),如果'orientationchange'存在,就使用這個(gè)
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
改變字體的尺寸
2015-12-23
第一段是判斷窗口有沒有orientationchange這個(gè)方法,有就賦值給一個(gè)變量,沒有就返回resize方法。
第二段是把document的fontSize大小設(shè)置成跟窗口成一定比例的大小,從而實(shí)現(xiàn)響應(yīng)式效果。