px ↔ rem ↔ em 轉換器

一般 best practice：字型大小、間距、容器闊度用 rem，邊框、陰影、subpixel 細節（例如 1 px hairline）用 px，內文嘅 line-height 同 padding 可以用 em 跟住自己嘅 font-size 縮放。Bootstrap、Tailwind、Material 都以 rem 為主。最重要嘅理由係「用家放大字」：如果你成個 layout 都用 px，瀏覽器 / OS 嘅文字放大設定就完全唔會生效，違反 WCAG SC 1.4.4（Resize Text）。如果只係寫 marketing landing page、設計稿全部 px，咁直接用 px 都冇問題，前提係你保證用家可以靠瀏覽器 Ctrl/Cmd ＋ 整體 zoom 放大。

呢個係十幾年前嘅老 trick，宜家唔太推薦。佢嘅原意係將 :root 設細啲，令 1 rem = 10 px，方便心算（1.6 rem = 16 px、2.4 rem = 24 px）。但有兩個問題：(1) 你 override 咗瀏覽器預設根字型，等於壓細咗用家自己改過嘅 default size（無障礙打折扣）；(2) 所有第三方組件、Tailwind preset、Bootstrap 等等都假設 :root = 16 px，整體會跟住縮細，可能要逐個調返。Tailwind 同 modern design system 直接俾你寫 text-base = 1 rem，靠 build-time 設定，唔需要呢個 trick。

係，CSS 同 print／PDF 嘅 pt 都係同一個定義：1 in = 72 pt。CSS 同時定義 1 in = 96 px（reference pixel）。所以 1 pt = 96 / 72 = 4/3 px，12 pt = 12 × 4/3 = 16 px。呢個亦係點解傳統印刷字級「12 pt 內文」喺 web 上面剛好對應預設嘅 16 px——係 W3C 故意揀嘅。Adobe Reader、Microsoft Word、Apple Pages 全部用同一個 pt（PostScript point）；如果你睇緊一啲舊文獻講「printer's point ≈ 0.351 mm（72.27 pt/in）」，咁係 TeX／LaTeX 嘅古早印刷學單位，CSS 同一般 PDF 唔會用。

WCAG 2.2 冇硬性最細字級規定，但實務上嘅共識係內文唔細過 16 px / 1 rem（手機 Safari 細過 16 px 嘅 input 仲會自動 zoom，超煩）。Material Design 建議 14 px+，Apple HIG 建議 17 pt（iOS body）、Microsoft Fluent 14 px+。所以「Body 文字 ≥ 16 px / 12 pt / 1 rem」係安全嘅起點，標題可以再大，metadata／legal small print 唔好細過 12 px / 9 pt / 0.75 rem。重點係用 rem 寫，俾用家有機會放大。