resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
? resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
?docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
可以詳細解釋一下上面兩段代碼的意思嗎?
? resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
?docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
可以詳細解釋一下上面兩段代碼的意思嗎?
2015-12-23
舉報
2018-01-23
找了半天終于在您明白了,感謝~
2017-12-24
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
2017-04-13
這是從哪個項目看到的呢?
????
2015-12-25
上面一句是三元運算符,判斷窗口有沒有orientationchange方法,true表示是冒號前面orientationchange;false是'resize';下面的是改變字體尺寸,由rem轉換成px;1rem=16px
2015-12-23
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
獲取瀏覽器支持的改變方向的函數,如果'orientationchange'存在,就使用這個
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
改變字體的尺寸
2015-12-23
第一段是判斷窗口有沒有orientationchange這個方法,有就賦值給一個變量,沒有就返回resize方法。
第二段是把document的fontSize大小設置成跟窗口成一定比例的大小,從而實現響應式效果。