要想了解rem這個(gè)單位的原理以及使用方法舟肉，先來(lái)了解下css所有的度量單位修噪。很多同學(xué)不太清楚的是，在 CSS 中長(zhǎng)度單位又分為絕對(duì)長(zhǎng)度和相對(duì)長(zhǎng)度路媚。我們今天來(lái)學(xué)習(xí)一下這些單位黄琼，看看有什么區(qū)別。
px
px像素單位其實(shí)是和設(shè)備屏幕的分辨率是直接相關(guān)的整慎。
在web開發(fā)中脏款，像素現(xiàn)在仍然是典型（主流的）度量單位。當(dāng)然裤园，你可以在web開發(fā)的過(guò)程中采用其他的單位撤师，但是往往這些單位在渲染時(shí)都被映射換算成像素。是我們最常使用的單位:
header{
width: 100px;
height: 100px;
border: 1px solid #fff;
}
em
em的含義最初是指基于當(dāng)前字體大寫字母”M”的尺寸比然。所以當(dāng)改變font-size的大小時(shí)丈氓，這個(gè)長(zhǎng)度單位將會(huì)發(fā)生變化。
現(xiàn)代所有的瀏覽器中强法，都會(huì)有這樣的一個(gè)默認(rèn)值万俗，即1em = 16px，所以即使你忘記了設(shè)置font-size也不要緊饮怯。
對(duì)于em我們需要注意:
基于當(dāng)前元素的(如果沒(méi)設(shè)置就是繼承其父元素的)font-size
<div style="font-size: 12px;">
<span style="font-size: 2em">em單位</span>
</div>
如上代碼中闰歪，span標(biāo)簽中設(shè)置了font-size: 2em，因?yàn)槠涓笜?biāo)簽設(shè)置了font-size: 12px蓖墅，所以span標(biāo)簽的結(jié)果就是font-size: 24px库倘。
rem
rem單位是相對(duì)于字體大小的html元素临扮，也稱為根元素。
1rem = 根元素(html 節(jié)點(diǎn))字體大小的倍數(shù)教翩。根元素（html）的 font-size:16px
html {
font-size: 10px; /* 不建議設(shè)置 font-size: 62.5%; 在 IE 9-11 上有偏差杆勇，具體表現(xiàn)為 1rem = 9.93px。 */
}
.sqaure {
width: 5rem; /* 50px */
height: 5rem; /* 50px */
}
中文版的 Chrome 不支持把font-size 設(shè)置到到 12px 以下饱亿，因此可以考慮給根元素設(shè)置 font-size: 125%蚜退。
rem與em的區(qū)別：
rem是相對(duì)于根元素（html）的字體大小，而em是相對(duì)于其父元素的字體大小
em最多取到小數(shù)點(diǎn)的后三位
<style>
html{ font-size: 20px; }
body{
font-size: 1.4rem; /* 1rem = 28px */
padding: 0.7rem; /* 0.7rem = 14px */
}
div{
padding: 1em; /* 1em = 28px */
}
span{
font-size:1rem; /* 1rem = 20px */
padding: 0.9em; /* 1em = 18px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
在上面的代碼中彪笼，我們將根元素（html）的字體大小font-size設(shè)為20px钻注，
body的字體大小設(shè)為1rem，那么轉(zhuǎn)換為像素就是28px（20 × 1.4）配猫，
接著我們又將div的padding設(shè)為1em幅恋，由于其基于父元素，所以轉(zhuǎn)換為像素是28px ( 28 × 1）泵肄，
然后我們又將span的字體大小設(shè)為1rem捆交，也就是20px，由于其自身設(shè)置了字體大小凡伊，所以padding設(shè)為1em零渐，轉(zhuǎn)換為像素是20px(20 × 1），而不是乘以其父元素的字體大小28px(28 × 1）系忙。
注意：當(dāng)元素自身設(shè)置了字體大小，那么如果它的其他css屬性也使用em單位惠豺，則會(huì)基于它自身的字體大小银还。（就像上面例子的span的padding一樣）
基于上面這些原因，個(gè)人更傾向于使用rem洁墙，因?yàn)閑m使用不當(dāng)?shù)脑捰挤瑁?dāng)出現(xiàn)多層繼承時(shí)，會(huì)很容易混淆热监，比如：
<style>
html{ font-size: 20px; }
body{
font-size: 0.9em; /* 18px */
}
div{
font-size: 0.8em; /* 14.4px */
}
span{
font-size: 0.9em; /* 12.96px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
使用em時(shí)捺弦，如果其祖先元素都是用了em，那么就會(huì)像上面一樣孝扛，body繼
承其父元素html的字體大小列吼，而div又繼承其父元素body的字體大小
，而span又繼承其父元素div的字體大小苦始，
最終span的字體大小最終是12.96px（20 × 0.9 ×0.8 × 0.9）寞钥。
vw vh
vw viewpoint width，視窗寬度陌选，1vw=視窗寬度的1%
vh viewpoint height理郑，視窗高度蹄溉，1vh=視窗高度的1%
vh等于viewport高度的1/100.例如，如果瀏覽器的高是900px,1vh求得的值為9px您炉。同理柒爵，如果顯示窗口寬度為750px,1vw求得的值為7.5px。
做一個(gè)占滿高度的或者接近占滿高度的幻燈片赚爵，可以用一個(gè)非常簡(jiǎn)單的方法實(shí)現(xiàn)棉胀，只要用一行CSS：
.cover{
width: 100vw;
height: 100vh;
}
vmin、vmax
vmin和vmax是相對(duì)于視口的高度和寬度兩者之間的最小值或最大值囱晴。
如果瀏覽器的高為1100px膏蚓、寬為700px，那么1vmin就是7px畸写，1vmax就是11px驮瞧；如果瀏覽器的高為800px，寬為1080px枯芬，那么1vmin也是8px论笔，1vmax也是10.8px。
選擇使用什么字體單位主要由你的項(xiàng)目來(lái)決定千所，如果你的用戶群都使用最新版的瀏覽器狂魔，那推薦使用rem，如果要考慮兼容性淫痰，那就使用px,或者兩者同時(shí)使用最楷。當(dāng)然了,最好根據(jù)實(shí)際應(yīng)用來(lái)使用相應(yīng)的字體單位
