rem是css3新定義的設置字體大小屬性，常用的兩種字體大小設置有下面2種：
1、 px為單位
2、em為單位(百分比用法跟em類似)
PX為單位
在Web頁面初期制作中，我們都是使用“px”來設置我們的文本，因為他比較精確和固定。只要頁面某元素設置了px字體大小，其子元素/子孫元素未設置字體大小或設置的字體大小css優先級沒父元素高的話，該子元素/子孫元素會繼承其父元素的px字體大小設置 。但種方法存在一個問題：當用戶在瀏覽器中瀏覽我們制作的Web頁面時，他改變了瀏覽器的字體大小，這時會使用我們的Web頁面布局被打破。這樣對於那些關心自己網站用戶可讀性、用戶體驗的前端人員來說，就是一個大問題了。因此，這時就提出了使用“em”來定義Web頁面的字體。
em為單位
前面也說了，使用是“px”會在瀏覽器中放大或縮放瀏覽頁面時頁面布局會被打破，要解決這個問題，我們可以使用“em”單位。
在使用“em”作單位時，一定需要知道其父元素的字體大小設置，因為“em”就是一個相對值，而且是一個相對於父元素的字體大小值（縮放比率/縮放因子）
實例：
父元素為16px，子元素設置為1.4em 則子元素實際字體大小16px x 1.4=22.4px
因此 “1.4em”可以是“14px”,也可以是“20px”，或者說是“24px”，總之是一個不確定值，至於確定值是多少，必須知道其父元素的值！
為什么要用rem單位
從上面的介紹可知，px單位的的設置會影響子元素/子孫元素的字體大小顯示，而em單位的設置也是根據父元素的字體來確定的。這時候父元素的字體大小設置就顯得很關鍵了！
而rem是相對於頁面根元素<html>，這樣就意味着，我們只需要在根元素確定一個參考值即可，其它元素設置rem大小都是以html的字體大小設置為參考值進行一個字體大小縮放，字體大小值標准參考圖：
我們來看一個簡單的代碼實例：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
我在根元素<html>中定義了一個基本字體大小為62.5%（也就是10px。設置這個值主要方便計算：1.2rem即 12px ，1.6rem即16px 。 如果沒有設置，將是以瀏覽器默認的“16px”為基准 ）。