rem是個低調(diào)的css單位，手淘在移動端的布局是基于rem處理的，當(dāng)然還要基于viewport的處理，這里暫且不表。在我的上個七夕主題中采用的是流式布局( 使用 % 百分比定義寬度，高度大都是用px來固定住)。如果使用 em 或 rem 單位進行相對布局，相對 % 百分比更加靈活，同時可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示。 因為em是相對父級元素的原因 沒有得到推廣，圣誕主題采用rem布局單位
rem是什么？
rem和em單位一樣，都是一個相對單位,不同的是em是相對于元素的父元素的font-size進行計算,rem是相對于根元素html的font-size進行計算,這樣一來rem就繞開了復(fù)雜的層級關(guān)系，實現(xiàn)了類似于em單位的功能。默認情況下瀏覽器給的字體大小是16px，按照轉(zhuǎn)化關(guān)系 16px = 1rem
自適應(yīng)處理：
使用rem布局的時候,為了兼容不同的分辨率,我們應(yīng)該要動態(tài)的修正根字體的大小,讓所有的用rem單位的子元素跟著一起縮放,從而達到自適應(yīng)的效果
參考右邊代碼區(qū)域，一般情況在項目的最前面加載一段js來修改html的font-size，針對不同分辨率計算font-size，監(jiān)聽瀏覽器更改 html的font-size
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
給html設(shè)置fontSize大小，其實就是在DOMContentLoaded或者resize變化后調(diào)整fontSize的大小，從而調(diào)整rem的比值關(guān)系。慕課的布局是右邊區(qū)域展示，所以按照移動端的320寬度為標(biāo)準(zhǔn)去做適配的，當(dāng)然基于這個縮放都是沒關(guān)系的
總結(jié)：
根據(jù)實際情況通過設(shè)計稿與當(dāng)前可視區(qū)的大小做一個比例關(guān)系，通過這個比例進行縮放處理
在代碼34行出填入一下代碼：
20 * (docEl.clientWidth / 320) + 'px';
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報
