CSS3 字體單位深度解析：px、em、rem 選擇指南

學習困惑

老師講解 CSS3 字體樣式像素問題時，對 px、em、rem 的區別與適用場景理解不透徹，希望獲得系統性指導。

核心概念對比

最佳實踐建議

1. 設置根字體：html { font-size: 62.5%; } （使 1rem = 10px，便於換算）
2. 佈局用 rem：頁面整體字體、模塊尺寸使用 rem，實現整體縮放
3. 細節用 em：組件內部 margin/padding 用 em，隨組件字體自適應
4. 邊框用 px：1px 邊框、圖標寬高固定用 px

推薦資源

深度教程：CSS3 定義字體大小與 rem 實戰

掌握三者轉換關係，是現代 CSS 佈局的基礎功力。