第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

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

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

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

可以詳細(xì)解釋一下上面兩段代碼的意思嗎?

正在回答

6 回答

找了半天終于在您明白了,感謝~

0 回復(fù) 有任何疑惑可以回復(fù)我~

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


6 回復(fù) 有任何疑惑可以回復(fù)我~

這是從哪個(gè)項(xiàng)目看到的呢?

????

0 回復(fù) 有任何疑惑可以回復(fù)我~

上面一句是三元運(yùn)算符,判斷窗口有沒有orientationchange方法,true表示是冒號(hào)前面orientationchange;false是'resize';下面的是改變字體尺寸,由rem轉(zhuǎn)換成px;1rem=16px



0 回復(fù) 有任何疑惑可以回復(fù)我~
#1

April_1st

rem轉(zhuǎn)換成px 不是應(yīng)該乘以16 +“px”么??
2016-09-29 回復(fù) 有任何疑惑可以回復(fù)我~
#2

慕運(yùn)維5015124 回復(fù) April_1st

/16+'px'
2016-10-18 回復(fù) 有任何疑惑可以回復(fù)我~

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

獲取瀏覽器支持的改變方向的函數(shù),如果'orientationchange'存在,就使用這個(gè)

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

改變字體的尺寸


2 回復(fù) 有任何疑惑可以回復(fù)我~

第一段是判斷窗口有沒有orientationchange這個(gè)方法,有就賦值給一個(gè)變量,沒有就返回resize方法。

第二段是把document的fontSize大小設(shè)置成跟窗口成一定比例的大小,從而實(shí)現(xiàn)響應(yīng)式效果。

5 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150
提交
取消
H5+JS+CSS3 實(shí)現(xiàn)圣誕情緣
  • 參與學(xué)習(xí)       122094    人
  • 解答問題       225    個(gè)

為圣誕節(jié)準(zhǔn)備的H5+JS+CSS特效案例教程,實(shí)現(xiàn)靜與動(dòng)的結(jié)合

進(jìn)入課程

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

我要回答 關(guān)注問題
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)