rem是個(gè)低調(diào)的css單位，手淘在移動(dòng)端的布局是基于rem處理的告材，當(dāng)然還要基于viewport的處理齿拂。用rem單位進(jìn)行相對(duì)布局，相對(duì)%百分比更加靈活孩等，同時(shí)可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示艾君。
一，rem是什么肄方？
rem和em單位一樣冰垄，都是一個(gè)相對(duì)單位，不同的是em是相對(duì)于元素的父元素的font-size進(jìn)行計(jì)算权她，rem是相對(duì)于根元素html的font-size進(jìn)行計(jì)算虹茶，這樣一來(lái)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)的效果封豪。
一般情況在項(xiàng)目的最前面加載一段js來(lái)修改html的font-size，針對(duì)不同分辨率計(jì)算font-size炒瘟，監(jiān)聽瀏覽器更改html的font-size吹埠，代碼如下：
var docEl = document.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
}
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
