一.css度量單位
要想了解rem這個單位的原理以及使用方法刨疼，先來了解下css所有的度量單位。很多同學不太清楚的是鹅龄，在 CSS 中長度單位又分為絕對長度和相對長度揩慕。
1.絕對長度
絕對長度指的是現(xiàn)實世界的度量單位，CSS 支持五種絕對長度單位扮休。
in 英寸
cm 厘米
mm 毫米
pt 磅
pc pica
其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc ,絕對長度在實際開發(fā)項目中較少使用迎卤。
2.相對長度
相對長度指的是依托其他類型的單位，同樣也是五種玷坠。
em 與元素字號掛鉤
ex 與元素字體的“x 高度”掛鉤
rem 與根元素的字號掛鉤
px 像素蜗搔，與分辨率掛鉤
% 相對另一值的百分比
大家平時寫項目也大概能知道，em,px,和%在以往的項目的使用較頻繁侨糟，而rem這個新增單位慢慢被越來越多的人使用碍扔。
3.下面我們使用一些以往常用的單位（em,px,和%）作為演示，只有了解它們的工作原理和機制秕重，才能更好的理解rem的原理和機制。
（1）em 相對單位
//em 相對單位
p {
margin: 0;
padding: 0;
background: silver;
font-size: 15px;
height: 2em;
}
解析：em 是相對單位厉膀，與字號大小掛鉤溶耘，會根據(jù)字體大小改變自己的大小二拐，靈活性很高。如代碼所示凳兵，這個元素設置的font-size:為15培px,也就是這個元素的1em = 15px,那它的height為2 * 15px = 30px,關(guān)鍵點在于百新，使用em這個相對單位這里的em值只與本元素的font-size相關(guān)聯(lián),而rem這個相對單位是與根元素的font-size相關(guān)聯(lián)，這個后面會細講庐扫。
（2）px 相對單位饭望，絕對特性
//px 相對單位，絕對特性
p {
margin: 0;
padding: 0;
background: silver;
font-size: 15px;
height: 55px;
}
解析：雖然 px 也是相對單位形庭，但由于和分辨率掛鉤铅辞，導致他其實就變成一個絕對單位了，自然靈活性沒有 em 高萨醒，但是使用難度較低斟珊，且大量的開發(fā)者習慣性使用它。
（3）%百分比
//%百分比
p {
margin: 0;
padding: 0;
background: silver;
font-size: 200%;
width: 50%;
}
解析：長度比較好理解富纸，就是掛鉤它所在區(qū)塊的寬度囤踩。而 font-size 則是繼承到的原始大小的百分比。
二.rem使用揭秘
rem的官方描述為為font size of the root element晓褪，之前說到過em是相對于其父元素來設置字體大小的堵漱，這樣就會存在一個問題，進行任何元素設置涣仿，都有可能需要知道他父元素的大小怔锌，在我們多次使用時，就會帶來無法預知的錯誤風險变过。而rem是相對于根元素<html>埃元，也就是說，我們只需要在根元素確定一個font size值媚狰，這樣就可以規(guī)避無法預知父元素font size值的風險岛杀，這就是之所以使用rem取代em的原因。
html {
font-size: 100px;
}
body {
font-size: 0.18rem; /*0.18 × 100px = 18px */
}
p {
margin: 0;
padding: 0;
background: silver;
height: 0.28rem; /*0.28 × 100px = 28px */;
width: 50%;
}
解析：如上述代碼所示崭孤，設置根元素html的font-size為100px,如果想要給body的font-size設置為18px,演算的結(jié)果就是18px % 100px = 0.18 rem;同理想要給p元素的height設置為28px,便是28px % 100px = 0.28 rem类嗤。也就是說，
10px = 1rem 在根元素（font-size = 10px（62.5%）的時候）辨宠；·
100px = 1rem 在根元素（font-size = 100px（625%）的時候）遗锣；
40px = 1rem 在根元素（font-size = 40px（250%）的時候）；
注意： 因為chrome下最小字體大小為12px嗤形，所以不能把html的font-size設置成1px或者10px精偿，推薦使用100px。
三.rem兼容性
rem畢竟是css3新的一個度量單位，支持的瀏覽器比如：Mozilla Firefox 3.6+笔咽、Apple Safari 5+搔预、Google Chrome、IE9+和Opera11+叶组。不出所料IE6-8無法兼容的拯田，所以rem的適用性很有局限，大部分場景用于只在移動端展示的頁面甩十。如果你的頁面還需要適配到pc端船庇，那么就老老實實的使用px吧。
如果只是用來放在移動端的頁面侣监，別人卻在pc上打開了鸭轮，因此可以設置一個html的最大寬度與最小寬度。580px就是手機上瀏覽器的最大寬度达吞。
html {
max-width: 580px;
min-height: 320px;
}
