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