區分CSS單位：px、em、rem、rpx
記錄一下前端開發中容易混亂的幾個單位：px、em、rem、rpx（用於微信小程式）
1.px：絕對單位，名稱為畫素。畫素是固定大小的單元,用於螢幕媒體(即在電腦螢幕上讀取)。一個畫素等於電腦螢幕上的一個點 (是你所用螢幕解析度的最小分割)。
2.em：相對單位，相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。
em單位轉換為畫素值：當使用em單位時，畫素值將是em值乘以使用em單位的元素的字型大小。·
例如，如果一個 div 有 20px 字型大小，10em 將等同於 200px，即 10 × 20 = 200px。
note:
- em的值並不是固定的；
- em會繼承父級元素的字型大小。
我們還需要注意：任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中宣告Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了。
所以我們在寫CSS的時候，需要注意幾點：
- body選擇器中宣告Font-size=62.5%；
- 將你的原來的px數值除以10，然後換上em作為單位；
- 重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。 也就是避免1.2 * 1.2= 1.44的現象。比如說你在父元素div中聲明瞭字型大小為1.2em，那麼在宣告子元素p的字型大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承div的字型高而變為了1em=12px。
3.rem：相對單位，可以理解為”root em”, 它是相對根節點html的字型大小來計算的。這個單位避免了em因繼承關係產生的不必要的副作用。我們只要在html標籤上設定字型大小為標準，文件中的字型大小都會以此為參照。
rem單位轉換為畫素值：比如根元素的字型大小 16px，10rem 將等同於 160px，即 10 x 16 = 160px。
html {font-size:62.5%;}/* 10÷16=62.5% */
body {font-size:12px;font-size:1.2rem ;} /* 12÷10=1.2 */
p {font-size:14px;font-size:1.4rem;}
note：chrome/firefox/IE9+支援。為了相容不支援 rem 的瀏覽器，我們需要在 rem 前面寫上對應的 px 值，這樣不支援的瀏覽器可以優雅降級。
4.rpx（responsive pixel）: 小程式中使用的相對單位。可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。
其用法和rem類似， 1rpx = 螢幕寬度/750 px, 所以在螢幕寬度為750的設計稿中，1rpx = 1px。