隨著響應式設計的不斷火熱，基於相對字型大小的單位變開始流行起來，但他們真正的區別在哪裡，有的時候會搞得暈頭轉向，在這裡我來做個總結。如果有說的不當的地方，還請各位同仁多多指教。

在說之前有兩個很重要的概念，那就是font-size具有繼承性以及body，html是根元素。

1. px 這個單位的特點就是精準性。但是他的缺點就在於太過於精確從而導致使用者在拖動、改變瀏覽器的字號大小以及尺寸時，就會出錯。這樣對於那些關心自己網站可用性的使用者來說，就是一個大問題了。因此，這時就提出了使用“em”來定義Web頁面的字型。
2. em 這個單位是相對於父級作為參考點而進行設定的，主要作用是為了適應不同螢幕下的字號大小。如果當前元素的父級並沒有設定字號大小，那麼此元素的基準點會被轉移到根元素上。
   比如，在body以及html上設定了font-size=“14px”，那麼根目錄下的所有字號大小都是根據這個14px來進行轉換的。如果遇到需要進行單獨設定的情況時，只需要在當前元素的父級上設定一個新的font-size即可。在此我給大家推薦一篇文章How to size text using ems

        body {
                font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
            }
            h1 {
                font-size: 2.4em; /*2.4em × 10 = 24px */
 

            }
            p   {
                font-size: 1.4em; /*1.4em × 10 = 14px */
            }
            li {
                font-size: 1.4em; /*1.4 × ? = 14px ? */
            }

rem Css3的官網是這樣定義rem的 “font size of the root element” rem依舊只是相對大小，但只是相對於html根目錄的字號大小，也就是說，我只需要改變根目錄的字號大小就可以改變全域性的字號大小。而em雖說可以根據父級元素以及根元素的大小而進行改變，但卻具有一定的不確定性。推薦給大家一個

在這裡建議將根目錄字號大小設定為62.5%

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*/}

但是rem存在一定的相容性，比如IE6-8就不支援，解決的辦法就是px和rem一起設定。