PX為單位
在Web頁面初期制作中，我們都是使用“px”來設置我們的文本，因為他比較精確和固定。
只要頁面某元素設置了px字體大小，其子元素/子孫元素未設置字體大小或設置的字體大小css優先級沒父元素高的話，該子元素/子孫元素會繼承其父元素的px字體大小設置 。
這種方法存在一個問題：當用戶在瀏覽器中瀏覽我們制作的Web頁面時，他改變了瀏覽器的字體大小，這時會使用我們的Web頁面布局被打破。
這樣對於那些關心自己網站用戶可讀性、用戶體驗的前端人員來說，就是一個大問題了。
因此，這時就提出了使用“em”來定義Web頁面的字體。
em為單位
em（font-size of the element）是指相對於父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。
使用是“px”會在瀏覽器中放大或縮放瀏覽頁面時頁面布局會被打破，要解決這個問題，我們可以使用“em”單位。
在使用“em”作單位時，一定需要知道其父元素的字體大小設置，因為“em”就是一個相對值，而且是一個相對於父元素的字體大小值（縮放比率/縮放因子），其真正的計算公式是：
例子：父元素為16px，子元素設置為1.4em 則子元素實際字體大小16px * 1.4=22.4px。
因此 “1.4em”可以是“14px”,也可以是“20px”，或者說是“24px”，總之是一個不確定值，至於確定值是多少，必須知道其父元素的值！
用rem單位
rem（font-size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，
從上面的介紹可知，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”為基准 ）。
rem屬性瀏覽器兼容性
rem是CSS3新引進來的一個度量單位，支持的瀏覽器還是蠻多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。
例如要設置手機瀏覽器顯示，父元素字體像素為6px，那就設置
html {font-size: 37.5%;/*6 ÷ 16 × 100% = 37.5%*/}
body {font-size: 1.4rem;/*1.4 × 6px = 8.4px */}
h1 { font-size: 2.4rem;/*2.4 × 6px = 14.4px*/}
參考：
http://www.phpvar.com/archives/2752.html
https://cloud.tencent.com/developer/information/%E7%A7%BB%E5%8A%A8%E7%AB%AFrem%E9%80%82%E9%85%8D
https://zhidao.baidu.com/question/553998626685304812.html
https://www.cnblogs.com/wxcbg/p/5908967.html