1.rem和em的區(qū)別
rem是根據(jù)html根節(jié)點(diǎn)來(lái)計(jì)算的卵酪，em是相對(duì)于父元素的烹骨，但是字體相關(guān)樣式會(huì)被子元素繼承莫绣，如果該節(jié)點(diǎn)的父元素繼承了他的父元素的樣式烟瞧，這樣情況就比較復(fù)雜了偷厦。
如果根節(jié)點(diǎn)的字體大小是16px（默認(rèn)是16px），一個(gè)子元素<div class="son">的width為1.2em燕刻，那么他會(huì)繼承根節(jié)點(diǎn)的16px只泼，實(shí)際的width就是16*1.2px，? ?如果我們多加一個(gè)<div class="father">包裹原來(lái)的div卵洗，然后設(shè)置其字體大小也為1.2em请唱， 這里由于.father繼承了根節(jié)點(diǎn)的16px，那么.father的字體大小就為（1.2*16px）过蹂，而.son的父節(jié)點(diǎn)又變成了.father十绑，.son就會(huì)繼承.father的字體大小(1.2*16px)，所以他的width就為(1.2*(1.2*16))px
而rem是直接相對(duì)于根節(jié)點(diǎn)的酷勺，不會(huì)出現(xiàn)這種因?yàn)槔^承而出現(xiàn)的bug本橙。
2.通過(guò)rem實(shí)現(xiàn)響應(yīng)式布局
rem單位是通過(guò)html的font-size的大小決定的，所以html的font-size相當(dāng)于是一個(gè)基準(zhǔn)脆诉，當(dāng)頁(yè)面的size發(fā)生變化的時(shí)候甚亭，只需要?jiǎng)討B(tài)的改變fong-size的大小，那么用rem的元素的對(duì)應(yīng)屬性也會(huì)動(dòng)態(tài)的變化
? window.onresize?=?()?=>?{? ?//當(dāng)窗口大小發(fā)生變化的時(shí)候執(zhí)行下面函數(shù)
? ??????? ? ?setW()
? ?}
//該函數(shù)是進(jìn)行單位換算的击胜，計(jì)算1rem對(duì)應(yīng)多少px
????function?setW()?{
? ? ? ? var?screenw?=?window.innerWidth; //獲取敞口大小
????????var?danwei?=?screenw?/?10;? ? ? ? ? ? //等分亏狰，這里的單位實(shí)際上就上換算過(guò)的1rem對(duì)應(yīng)多少px
????????var?html?=?document.querySelector('html')
????????html.style.fontSize?=?danwei?+?'px'? // 然后將這個(gè)像素賦值給根節(jié)點(diǎn)的font-size
}
? setW()?
//??上述代碼中將視圖容器分為10份，font-size用十分之一的寬度來(lái)表示偶摔，最后在header標(biāo)簽中執(zhí)行這段代碼暇唾，就可以動(dòng)態(tài)定義font-size的大小，從而1rem在不同的視覺(jué)容器中表示不同的大小辰斋，用rem固定單位可以實(shí)現(xiàn)不同容器內(nèi)布局的自適應(yīng)策州。
