實際展示 EM 與 REM 的差異

PX

一般來說,我們會使用 px 來作為網頁設計的單位,除了它精確度較高以外,對於許多網頁設計師來說也是相當容易入門的單位。

font-size:12px
font-size:13px
font-size:14px
font-size:15px

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

font-size: large
font-size:12px
font-size:13px
font-size:14px
font-size:15px

EM

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

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

font-size: 15px
font-size: 1em
font-size: 1.2em
font-size: 1.4em

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

font-size: 1.4em
font-size: 1em
font-size: 1.2em
font-size: 1.4em
font-size: 1.4em
font-size: 1em
font-size: 1.4em

REM

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

以這個範例來說,此網站的文字大小是 16pxrem的尺寸就是以 16px 為基準,故下方的 1rem 會與 16px 相同尺寸。所以無論外層是否有其他文字大小,皆不會影響 rem 的尺寸,唯一會影響 rem 比例的只有 html 的文字大小(可以打開 開發者工具 試試看喔)。

font-size: 1.4em
font-size: 1rem
font-size: 16px
font-size: 1.2rem
font-size: 1.4rem
font-size: 1.4em

使用 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

實作上該如何選擇

而就實作上,remem 該如何抉擇呢?

選擇 em

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

以下方的範例來說,可以直接點選文字大小切換內文,而不需要使用太多的 CSS 樣式。

選擇 rem

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

以 Bootstrap 4 來說,許多元件都是以 rem 作為單位,所以只要改寫 HTML 的 font-size,就能一口氣修改全部元件的尺寸,下方的範例大家可以到直接到 codepen 上拉拉看,會發現不同的瀏覽器大小,元件尺寸也會跟著更動喔。

CodePen 連結:https://codepen.io/Wcc723/pen/JKZkxE

相信看到這,大家對於 emrem 有更多的了解,如果還有不明白的地方,歡迎到我們六角學院粉絲團留言喔~



Tags

友站推薦

前端專欄文章