EM 與 REM 的差異

PX

一般來說，我們會使用 px 來作為網頁設計的單位，除了它精確度較高以外，對於許多網頁設計師來說也是相當容易入門的單位。
px 的特性是屬於 絕對數值，他不受外圍的單位影響，只要固定是 12px，就會以 12 像素呈現。
他並不會受到外圍文字大小所影響，內部的文字大小還是依據 CSS 設定所呈現。

EM

另一個常見的文字單位是 em， em 是相對的的數值單位，它會受到外圍的文字大小所影響，而 1em 即是 1 的文字大小， 1.5em 也就是 1.5 倍的文字大小。
如果外圍是以 15px，內層的文字第一層 1em 等同於 15px，隨後的依比例放大。
如果外層的文字大小直接從 1.4em 開始，可以看到內層的 1em 文字大小等同於外層 1.4em，隨後的逐漸放大。
如果在加入一層在內部，文字就會以 1.4 * 1.4 的倍數再放大，這是 em 的相對比例單位的特性，是優點也是缺點，如果無法掌握就容易失控。

REM

rem 也是相對的文字尺寸，和 em 使用方法接近，不同的是他僅相對於 root 層級的文字大小(網頁中的 html)。
此網站的文字大小是 16px，rem的尺寸就是以 16px 為基準，故下方的 1rem 會與 16px 相同尺寸。
所以無論外層是否有其他文字大小，皆不會影響 rem 的尺寸，唯一會影響 rem 比例的只有 html 的文字大小。

REM 瀏覽器的限制

實作上該如何選擇

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

rem 的文字基準取決於最外層的 html 文字大小，很適合用在整體的尺寸大小切換，以 RWD 響應式網頁來說，可以依據不同的尺寸，統一切換整體網頁的文字大小。
以 Bootstrap 4 來說，許多元件都是以 rem 作為單位，所以只要改寫 HTML 的 font-size，就能一口氣修改全部元件的尺寸，