預計閱讀 1 分鐘原文來源
為何 CSS 像素是幻象？
在網頁設計的常用說法裡，**像素（pixel）**被視為最精準的度量單位，甚至有人追求「pixel perfect」的排版。然而，螢幕實際上並沒有一個完美的方格網格；在不同裝置上，1 px 並不等同於一個實體裝置像素。高解析度螢幕（如 Retina）會把 1 px 映射到多個實體像素，而在大型電視螢幕上，同樣的 1 cm 也不會恰好等於公制米的百分之一。CSS 中的長度屬於「感知」尺度——在手機、筆電或電視上，16 px 看起來大致相同，因為它是根據典型觀看距離而設計的。
以 ch 單位提升可讀性
作者在部落格中為了讓文字寬度更貼近人眼的閱讀舒適度，拋棄了以螢幕寬度百分比設定的做法，改用 ch 單位。
- ch：代表字元「0」的寬度，雖非嚴格的字元寬，但在等寬字型或大多數常見字型下足以作為文字區塊寬度的參考。
- 使用 ch 設定容器寬度，可確保文字行長（line length）維持在適合閱讀的範圍，無論螢幕尺寸如何變化。
同理，padding 與 margin 也以 ch 為基礎，讓元素四周的空隙與內文比例保持一致，提升版面整體的協調感。
垂直度量的另一選擇：ex 與 lh
對於高度或行間距，直接以 ch 表示往往不合邏輯。此時 ex（小寫字母 x 的高度）提供了更貼近字型垂直尺寸的度量。
此外，評論中提到 lh（line‑height 的計算值）在設定內邊距與外邊距時相當便利，與 ch 結合使用，可同時控制水平與垂直的比例，使排版更「看起來正確」。
相對單位的趨勢與實務注意
從討論可見，開發者普遍認為 相對單位（ch、ex、vh、vw、lh 等）較 絕對單位（px、cm）更具彈性。
- vh（viewport height）讓整體頁面與字型隨視口高度自動縮放，適合響應式設計。
- 使用 ch 時需留意與 Web Font 結合的副作用：若字型非系統預設，字元寬度可能因字型本身的設計差異而產生布局位移（layout shift）。此問題在使用系統字型時較少出現。
結語：從幻象到實感的排版哲學
CSS 的「像素」並非絕對真實，它是一種感知尺度；而 ch、ex、lh 等相對單位則提供了更貼近人類閱讀感受的度量方法。未來的網頁設計若能更廣泛採用這些單位，將有助於在多樣化裝置環境中維持一致的可讀性與美感。對開發者而言，關鍵在於根據內容特性選擇合適的單位，並在使用自訂字型時做好測試，以避免意外的布局移位。讓我們拋開「像素即真理」的迷思，朝向更人本的排版體驗前進。
分享