px, em, rem, vw, vh 差在哪？網頁單位選擇怎麼選

還在全程用 px 嗎？想讓網頁在手機與電腦都能完美呈現，你必須搞懂相對單位！這篇文章比較 px、em、rem 與 vw、vh 的差異，並提供網頁排版的最佳單位建議。

為什麼不能只用 px？

一開始想到單位，通常直覺就px，確實也是廣泛運用又常見的單位，但在智慧型手機普及、響應式網頁 (RWD) 成為標準後，如果這時候還堅持「萬物皆 px」，你的網頁在不同裝置上很容易字體太小、版面跑掉，甚至在無障礙體驗 (a11y) 上被打低分。

要解決這個問題，我們需要針對不同的網頁設計使用不同單位，而最主要單位分成兩大類：絕對單位與相對單位。

(1)px (像素)：

大小固定，不會隨著螢幕或父層改變。100px 在桌機是這樣寬，在手機上也是這麼寬。因此不論在哪個裝置下如果有想要固定的尺寸，才會建議使用px。

優點：直觀、精準，所見即所得

缺點：缺乏彈性，無法隨使用者設定或螢幕縮放自動調整

建議：邊框 (Border)、裝飾性線條、極小的陰影設定。

另外還有其他絕對單位，如 cm, mm, in, pt 等單位，但它們通常只用於「列印版樣式 (Print Style)」，網頁顯示較少使用。

它們會根據「參照對象」改變大小

(1) em

參照「元素本身」或「父元素」的 font-size

計算上，如果父層字體是 16px，子層設 1.5em，那子層就是 16px * 1.5 = 24px

因為 em 是看父層，如果你有很多層 div 包在一起，每一層都設 1.5em，尺寸會像複利一樣「乘」上去，最後字體會變得意外巨大或極小，非常難以控制。

(2) rem

r 代表 root。相對於「網頁最根部 (html 標籤)」的字體大小

因此在計算上，瀏覽器預設 html 字體通常是 16px

使用rem，比例統一好管理！且當使用者在瀏覽器設定中放大預設字體時，你的網頁會等比例放大，也符合無障礙網頁標準。

(3) vw (Viewport Width)

視窗寬度的百分比。1vw = 1% 的視窗寬度

當你設定 width: 50vw，代表這個區塊永遠佔據螢幕一半的寬度

(4) vh (Viewport Height)

視窗高度的百分比。1vh = 1% 的視窗高度。

假設設定 height: 100vh，可以確保圖片剛好撐滿整個螢幕高度，帶來沉浸式的視覺體驗

根據目前的開發，建議可以這樣搭配