rem是什么
rem（font size of the root element）是指相對于根元素的字體大小的單位。
1rem等于根元素htm的font-size，即只需要設置根元素的font-size，其它元素使用rem單位時，設置成相應的百分比即可。
為什么需要rem
px：是相對于顯示器屏幕分辨率而言的相對長度單位。在移動端，因為手機分辨率種類頗多，不可能一個個去適配，這時px就顯得非常無力，所以就要考慮em和rem。
em：是繼承父級的，假設html的font-size默認為16px，body字體大小定義為50%，那么在body里字體大小就是1em=8px了。當你又定義了一個div，然后把字體設置成了50%，請問，現在div下的1em等于多少？因為繼承了父級的值，現在這個div里的1em=4px，這么嵌套下去的話，抱歉，我數學不好！所有rem就出現了。
rem：是em的升級版，rem只會相對html的值，不會受到父級的影響，這樣的好處在于：從em里的例子來講，1rem始終會等于8px。使用的時候不需要重新計算rem此時的大小。
兼容性
rem是CSS3新引進來的一個度量單位，大家心里肯定會覺得心灰意冷呀，擔心瀏覽器的支持情況。其實大家不用害怕，你可能會驚訝，支持的瀏覽器還是蠻多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只有IE6-8無法兼容。
- 如何兼容？
為了兼容不支持 rem 的瀏覽器，我們需要在 rem 前面寫上對應的 px 值,IE6~IE8將自動忽略它們所無法識別的rem單位：
html {
font-size: 20px;
}
body {
font-size: 12px;
font-size: 1.2rem; /* 12÷10=1.2 */
}
p {
font-size: 14px;
font-size: 1.4rem;
}
rem使用（適配）
rem換算適配代碼↓（設計稿寬度：640，字體值：20）
@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
html,body {
font-size:16.875px;
}
}
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
html,body {
font-size:15px;
}
}
@media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
html,body {
font-size:12.5px;
}
}
@media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
html,body {
font-size:11.25px;
}
}
@media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
html,body {
font-size:10px;
}
}
@media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
html,body {
font-size:9.375px;
}
}
@media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
html,body {
font-size:8.4375px;
}
}
@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
html,body {
font-size:7.5px;
}
}
@media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
html,body {
font-size:6.46875px;
}
}
@media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
html,body {
font-size:6.25px;
}
}
@media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
html,body {
font-size:5.859375px;
}
}
@media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
html,body {
font-size:5.625px;
}
}
@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
html,body {
font-size:5px;
}
}
@media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
html,body {
font-size:3.75px;
}
使用rem需要注意的地方
-
通常在標題，正文等大面積文字的位置可以使用 rem。但是在一些特殊的設計場景，rem 可能會導致布局錯位，比如這樣一個回頂部的按鈕：
- Chrome及后來加入Webkit陣營的Opera都不支持頁面字號小于12px，如果希望你的程序足夠安全，盡量不要定義小于12px的字號。
比如這樣的：
html {
font-size: 10px
}
因為部分瀏覽器會將小于 12px 的字變成 12px 來顯示。那么此時，在這些瀏覽器下，如果我做了這樣的定義：
.demo {
width: 10rem;
}
你預期得到10px ?? 10rem = 100px，但實際上因為10px小于12px，會默認使用12px來替換10px。所以變成了12px ??10rem = 120px。這是非常大的錯誤，我們應當盡量避免。
- chrome中body使用rem失效
問題：在 Chrome 和 Opera 上，如果我們給 body 元素應用了 rem，取值將會計算錯誤。
代碼如下：
html {
font-size: 10px;
}
body {
font-size: 1.4rem;
}
我們預期 body的 font-size 為 14px，然而實際情況與我們想象的不太一樣，最終 body 的計算值并不是 14px，它忽略了 html 的定義，而是直接使用了瀏覽器的默認字號作為參照。于是最終計算值為：16px ?? 1.4rem = 22.4px。測至 chrome 45.0 和Opera 33.0 仍然存在這個問題，不過 chrome 49.0 和 Opera 37.0 看起來已經被修復了。
為了有效的繞過這個問題，并且實現相同的效果，我們可以將代碼修改如下：
html {
font-size: 10px;
}
body {
font-size: 1.4em;
}
由于 body 是 html 的直接子元素，所以此時對 body 使用 em 與 rem 的效果是相同的。em是參照父元素進行換算的。
- 不要對html設置百分比字號
雖然大部分瀏覽器的默認字號是 16px，但仍然有使用其它默認值的瀏覽器，比如我依稀記得 firefox 使用了15px。而且最重要的是，用戶是可以改變瀏覽器默認字號的，所以你認為的可能并不是你認為的。
批量轉換rem的工具
已經在工程中大量使用px單位想轉成rem單位，可以用這個工具：
nodeJs腳本工具
為了方便更對px更有感覺的前端人員，在寫代碼時，將px單位自動轉為rem單位的插件：
sublime插件
在線批量轉css文件：
http://www.520ued.com/tools/rem
在線轉css代碼：
http://alurk.com/
