在分析px，em，rem的區別前，我們首先要知道——所有瀏覽器的默認字體高度爲16px。
1、px
px是指像素，相對於顯示器屏幕分辨率，是固定的值。
2、em
em是相對父元素的長度單位。
當沒有自己設定父元素，則默認相對HTML根元素，即1em = 16px。
爲了計算方便，在使用 em 時，將父元素設置爲10px，100px等更加方便計算，即 1em = 10px 或 1em = 100px 。當父元素字體大小改變，子元素字體大小隨之改變。
3、rem
rem也是相對長度單位，但相對的是HTML根元素。
這使得 rem 比 em 使用更加簡單，只需改變HTML根元素的字體大小，就可以成比例的調整所有的字體大小。
爲了方便使用，將HTML根元素的字體大小設置爲 html{font-size:62.5%} ，則16px × 62.5%=10px，即將瀏覽器的默認字體高度設爲10px，此時 1rem = 10px , 1.2rem = 12px。