先看定義蓄氧。
rem（font size of the root element），意為根據(jù)網(wǎng)頁(yè)的根元素來設(shè)置字體大小，和em（font size of the element）的區(qū)別是，em是根據(jù)其父元素的字體大小來設(shè)置，而rem是根據(jù)網(wǎng)頁(yè)的根元素html來設(shè)置字體大小的牡直。
em由于參考的是父元素字體大小缀匕，所以用em做彈性布局時(shí)，一旦某個(gè)節(jié)點(diǎn)的字體大小變化碰逸，那么后代元素都需要重新計(jì)算乡小。
ren取值分為兩種情況：
// 作用于根元素，相對(duì)于原始大卸贰（16px）,所以html的font-size為32px
html {font-size: 2rem}
// 作用于非根元素满钟，相對(duì)于根元素字體大小，所以為64px
p {font-size: 2rem}
rem適配
<style>
.con {
width: 10rem;
height: 10rem;
background-color: red;
}
</style>
<div class="con"></div>
在上面這段代碼中约急，寬度和高度都使用rem為單位零远，那么在瀏覽器中是什么樣子？
可以看到是一個(gè)160 x 160的矩形厌蔽，因?yàn)?code>html根元素的默認(rèn)font-size就是16px牵辣。
16px是W3C默認(rèn)的，在瀏覽器中也可調(diào)整奴饮。Chrome中纬向，如果將字號(hào)縮小，那么渲染的圖形也會(huì)變小戴卜。
接著上例逾条，可以修改html元素的font-size。
<style>
html {
font-size: 20px;
}
.con {
width: 10rem;
height: 10rem;
background-color: red;
}
</style>
<div class="con"></div>
html的font-size調(diào)整為20px投剥，20/16=1.25师脂，1.25*160就知道子元素應(yīng)該擴(kuò)大多少了。
由此江锨，給html設(shè)定不同的值吃警，從而達(dá)到我們css樣式中的適配效果。
動(dòng)態(tài)的rem
通過JS動(dòng)態(tài)獲取瀏覽器窗口寬度啄育，并將html的font-size設(shè)置為當(dāng)前窗口寬度酌心，這樣，就可以用當(dāng)前窗口寬度的百分比來表示子節(jié)點(diǎn)寬度了挑豌。
<script>
var pageWidth = document.documentElement.clientWidth;
var styleContent = 'html {font-size:' + pageWidth + 'px;}'
var style = document.createElement("style");
style.innerHTML = styleContent;
document.head.appendChild(style);
</script>
窗口寬度為700px安券，即document.documentElement.clientWidth的值為700px，這個(gè)值將被JS獲取到并寫入到html元素的font-size中氓英，構(gòu)成根元素的1rem = 700px侯勉。之后，html下的所有子節(jié)點(diǎn)都可以用1rem的分?jǐn)?shù)來表示了债蓝。
.half需要50%的width壳鹤，即width: 0.5rem，即最后渲染尺寸寬度為350px饰迹。
.full為100%寬度芳誓，width: 1rem和html根元素相同。
當(dāng)然啊鸭，用1rem來表示還是會(huì)不方便（0.5锹淌、0.05、0.001等等）赠制，比如可以將窗口寬度/16赂摆，以800px窗口寬度為例，var styleContent = 'html {font-size:' + pageWidth/16 + 'px;}'钟些，如此烟号，1rem = 50px(800/16)。
如上政恍，窗口寬度800px汪拥，
1rem=50px。這樣設(shè)置篙耗，不管在什么窗口寬度下迫筑，兩個(gè)DIV占窗口寬度永遠(yuǎn)是50%。
