網站設計應該從 px 轉移到 rem
本文翻譯自 Christine Vallaure 的文章 Why designers should move from px to rem (and how to do that in Figma)
如果你和我一樣，px在過去的幾年裡，你很高興地在 Sketch 和 Figma 中使用 Pixel( )，而沒有想太多。這是他們給我的單位。它肯定是正確的，如果不正確，開發團隊可以解決這個問題，不是嗎？另外，有很多人說我的設計應該是像素完美的，對吧？
使用 PX 的問題？
設計軟件（例如在 Figma 中）中的像素是絕對單位，這意味著1px對應於定義的大小-defined size （稍後這將轉換為 不同的屏幕分辨率，但在Figma 中，我們以 1x 像素，其中 1px=1pt）。
設計師最愛的是固定值，因為可完全控制。控制一切，讓設計看起來很完美！然而，使用px會造成嚴重的 可訪問性障礙 — accessibility barriers，例如一旦轉換為 CSS 就會否決用戶設置的字體大小首選項。
字體大小偏好？那是什麼？
每個瀏覽器都有默認的預設文字大小，這意味著無樣式的文本將以特定大小顯示，通常為16px. 由於手機的多樣性，和不同用戶對字體的敏感度不同，用戶可以 通過瀏覽器設置更改此預設文字大小。
自己嘗試一下Chrome → 更多菜單（三個小點，右上角）> 設置 > 外觀 > 自定義字體或字體大小都可以解決問題。特別是有視力障礙的用戶可能會依賴於此！
用戶不僅可以自由定義文字大小。開發人員還可以使用 script 通過 CSS更改預設文字大小。
👆順便說一句：用戶可以增加瀏覽器的縮放設置而不是更改預設文字大小。這不會導致 px 出現問題並且工作正常！一切都會相應地擴展。然而，我們對用戶瀏覽器預設選項一無所知，因此使用 rem 將提供縮放和預設文字大小更改服務，讓每個人都開心。
PX 將覆寫（overwite）用戶的預設文字大小
讓我給你舉個例子。現在你在一個新站工作而且全部皆使用px. 假設您的H1是48px並且您的 p是16px。聽起來像是屏幕上合理的可讀值。
正如固定px的那樣，樣式的 px 將會覆蓋瀏覽器設置文字大小。即使用戶手動更改瀏覧器的預設文字大小，就像在我們的示例中從16px更改為24px，這也不會影響顯示的大小。所以你為無障礙增添了一個「障礙」。
如果改用 REM 單位會有什麼變化？
rem是與預設文字大小相關的相對單位（rin remrem 實際上代表 root 根源）。因此，大多數時候1rem = 16px （瀏覧器的預設文字大小常為16px），如果更改了預設文字大小（請記住這可以由用戶或開發人員完成），24px例如1rem = 24px.
1rem =預設文字大小的當前設置
所以要將我們H1的設定為 3rem 在左邊的瀏覧器設定將出現48px，系統進行此運算48px/16px(default root size we assume)= 3rem。如果對你來說更容易，就把它想像成 %。1rem 為 100%，3 rem 為 300%。
它的美妙之處在於，通過使用 rem 單位來定義字體大小，您可以作為設計師保持字體比例的和諧和層次，同時仍然為用戶調整字體大小的需要提供靈活性。
