CSS PX EM 與 REM 的差異

PX

px 的特性是屬於 絕對數值，他不受外圍的單位影響，只要固定是 12px，就會以 12 像素呈現。以下方的範例來說，他並不會受到外圍文字大小所影響，內部的文字大小還是依據 CSS 設定所呈現。

EM

另一個常見的文字單位是 em， em 是相對的的數值單位，它會受到外圍的文字大小所影響，而 1em 即是 1 的文字大小， 1.5em 也就是 1.5 倍的文字大小。

以下方的範例可以發現，如果外圍是以 15px，內層的文字第一層 1em 等同於 15px，隨後的依比例放大。

接下來改成使用 em 來做實驗，外層的文字大小直接從 1.4em 開始，可以看到內層的 1em 文字大小等同於外層 1.4em，隨後的逐漸放大。如果在加入一層在內部，文字就會以 1.4 * 1.4 的倍數再放大，這是 em 的相對比例單位的特性，是優點也是缺點，如果無法掌握就容易失控。

REM

rem 也是相對的文字尺寸，和 em 使用方法接近，不同的是他僅相對於 root 層級的文字大小(網頁中的 html)。

以這個範例來說，此網站的文字大小是 16px，rem的尺寸就是以 16px 為基準，故下方的 1rem 會與 16px 相同尺寸。所以無論外層是否有其他文字大小，皆不會影響 rem 的尺寸，唯一會影響 rem 比例的只有 html 的文字大小

該如何選擇

選擇 em

em 的文字大小基準取決於父層的文字大小，所以建議使用在限制區域的內容、元件 如 Button
等等，就文字大小切換的效果來說，em 可以輕易的從父層改變進而影響內容文字的大小。

選擇 rem

rem 的文字基準取決於最外層的 html 文字大小，很適合用在整體的尺寸大小切換，以 RWD 響應式網頁來說，可以依據不同的尺寸，統一切換整體網頁的文字大小。