rem是個(gè)低調(diào)的css單位，手淘在移動(dòng)端的布局是基于rem處理的，當(dāng)然還要基于viewport的處理，這里暫且不表。在我的上個(gè)七夕主題中采用的是流式布局( 使用 % 百分比定義寬度，高度大都是用px來固定住)。如果使用 em 或 rem 單位進(jìn)行相對(duì)布局，相對(duì) % 百分比更加靈活，同時(shí)可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示。 因?yàn)閑m是相對(duì)父級(jí)元素的原因 沒有得到推廣，圣誕主題采用rem布局單位

rem是什么？

rem和em單位一樣，都是一個(gè)相對(duì)單位,不同的是em是相對(duì)于元素的父元素的font-size進(jìn)行計(jì)算,rem是相對(duì)于根元素html的font-size進(jìn)行計(jì)算,這樣一來rem就繞開了復(fù)雜的層級(jí)關(guān)系，實(shí)現(xiàn)了類似于em單位的功能。默認(rèn)情況下瀏覽器給的字體大小是16px，按照轉(zhuǎn)化關(guān)系 16px = 1rem

自適應(yīng)處理：

使用rem布局的時(shí)候,為了兼容不同的分辨率,我們應(yīng)該要?jiǎng)討B(tài)的修正根字體的大小,讓所有的用rem單位的子元素跟著一起縮放,從而達(dá)到自適應(yīng)的效果

參考右邊代碼區(qū)域，一般情況在項(xiàng)目的最前面加載一段js來修改html的font-size，針對(duì)不同分辨率計(jì)算font-size，監(jiān)聽瀏覽器更改 html的font-size

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

給html設(shè)置fontSize大小，其實(shí)就是在DOMContentLoaded或者resize變化后調(diào)整fontSize的大小，從而調(diào)整rem的比值關(guān)系。慕課的布局是右邊區(qū)域展示，所以按照移動(dòng)端的320寬度為標(biāo)準(zhǔn)去做適配的，當(dāng)然基于這個(gè)縮放都是沒關(guān)系的

總結(jié)：

根據(jù)實(shí)際情況通過設(shè)計(jì)稿與當(dāng)前可視區(qū)的大小做一個(gè)比例關(guān)系，通過這個(gè)比例進(jìn)行縮放處理