hexschool
實際展示 EM 與 REM 的差異
PX
一般來說，我們會使用 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 的文字大小(可以打開 開發者工具 試試看喔)。
使用 rem 時，可以先了解瀏覽器的限制， rem 是不支援 IE8 以前的瀏覽器的喔。
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
rem |
4 (532.3) | 3.6 (1.9.2) | 9.0 | 11.6 | 4.1 |
來源：https://developer.mozilla.org/en-US/docs/Web/CSS/length
實作上該如何選擇
而就實作上，rem 與 em 該如何抉擇呢？
選擇 em
em 的文字大小基準取決於父層的文字大小，所以建議使用在限制區域的內容、元件等等，就文字大小切換的效果來說，em 可以輕易的從父層改變進而影響內容文字的大小。
以下方的範例來說，可以直接點選文字大小切換內文，而不需要使用太多的 CSS 樣式。
選擇 rem
rem 的文字基準取決於最外層的 html 文字大小，很適合用在整體的尺寸大小切換，以 RWD 響應式網頁來說，可以依據不同的尺寸，統一切換整體網頁的文字大小。
以 Bootstrap 4 來說，許多元件都是以 rem 作為單位，所以只要改寫 HTML 的 font-size，就能一口氣修改全部元件的尺寸，下方的範例大家可以到直接到 codepen 上拉拉看，會發現不同的瀏覽器大小，元件尺寸也會跟著更動喔。
CodePen 連結：https://codepen.io/Wcc723/pen/JKZkxE
相信看到這，大家對於 em 與 rem 有更多的了解，如果還有不明白的地方，歡迎到我們六角學院粉絲團留言喔～
