CSS rem 單位深度解析：為何現代 Web App 必須採用 rem 實現完美屏幕適配

rem 是什麼？

rem（root em）相對於根元素 <html> 的字體大小。預設瀏覽器 font-size: 16px，故 1rem = 16px。與 em（相對父元素）不同，rem 全域統一基準，避免巢狀疊加計算困擾。

核心優勢

1. 強大的等比例屏幕適配

移動端裝置寬度從 320px 到 414px 甚至更大。傳統固定寬度、流式布局、viewport 縮放皆有缺陷。採用 rem：

• 設定 html { font-size: 100px; }（或依設計稿換算）。
• 所有元素尺寸、字體、間距均用 rem。
• JS 監聽 resize 動態調整 html 字體大小 = 裝置寬度 / 設計稿寬度 * 基準值。
• 整個頁面自動等比例縮放，零媒體查詢。

2. 免疫瀏覽器字體縮放設定

使用者若在瀏覽器設定「最小字體大小」或頁面縮放，px 固定不變導致排版破裂，rem 隨根元素縮放，保持比例協調。

3. 避免 em 多層疊加計算地獄

em 依賴父元素，多層巢狀導致 1.2em * 1.2em * 1.2em... 難以預測。rem 永遠參考根元素，維護極簡單。

實戰配置範例

/* CSS */
html { font-size: 100px; } /* 設計稿 750px 寬，1rem = 100px 方便換算 */
body { font-size: 0.14rem; } /* 14px */
.container { width: 7.5rem; padding: 0.15rem; }

/* JS 動態基準 */
(function () {
    const designWidth = 750;
    function setRootFont() {
        const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        document.documentElement.style.fontSize = (clientWidth / designWidth * 100) + 'px';
    }
    window.addEventListener('resize', setRootFont);
    setRootFont();
})();

淘寶、京東等大型 Web App 採用證明

手機淘寶首頁改版全面採用 rem，證明其在高併發、多裝置環境下的穩定性與開發效率提升。