CSS 中的 rem 單位詳解
rem 是 CSS3 引入的一個相對長度單位，全稱是 “root em”（根 em）。它的出現解決了傳統 em 單位在嵌套結構中的級聯計算問題，成為現代 Web 響應式布局和可訪問性設計的重要工具。
一、rem 的基本定義
rem 相對于 根元素（<html>）的 font-size 計算。
默認情況下，瀏覽器根元素的 font-size 是 16px（絕大多數瀏覽器的默認值）。
因此，默認時 1rem = 16px，2rem = 32px，0.5rem = 8px。
/* 根元素默認字體大小 16px */
html {
font-size: 16px;
}
.box {
width: 10rem; /* 160px */
font-size: 1.5rem; /* 24px */
padding: 1rem; /* 16px */
}二、rem vs em
<div class="parent"> 父級 2em <div class="child"> 子級 2em </div> </div>
html { font-size: 16px; }
.parent { font-size: 2em; } /* 32px */
.child { font-size: 2em; } /* 64px（相對父級32px） */若改用 rem：
.parent { font-size: 2rem; } /* 32px（相對根16px） */
.child { font-size: 2rem; } /* 32px（同樣相對根） */結論： rem 避免了 em 的“雪球效應”，更易預測和控制。
三、設置根字體大小的策略
1.直接設置像素值（不推薦）
html { font-size: 16px; }2. 使用百分比（推薦）
html { font-size: 62.5%; }瀏覽器默認 16px，62.5% 即 16px * 0.625 = 10px。
此時 1rem = 10px，方便換算（1.6rem = 16px）。
保留了用戶調整默認字體的能力：若用戶將瀏覽器基礎字體改為 20px，則 1rem = 12.5px，頁面整體等比縮放。
3. 使用 vw 配合（響應式進階）
html {
font-size: 16px; /* fallback */
font-size: calc(14px + 0.2vw);
}四、實際應用場景
1.全局字號系統
html { font-size: 62.5%; } /* 1rem = 10px */
h1 { font-size: 4rem; } /* 40px */
h2 { font-size: 3rem; } /* 30px */
p { font-size: 1.6rem; } /* 16px */
small { font-size: 1.2rem; } /* 12px */2. 間距與布局
.container {
width: 80rem; /* 最大寬度 800px（10px * 80） */
padding: 2rem;
margin: 0 auto;
}
.card {
border-radius: 0.8rem;
margin-bottom: 1.5rem;
}3. 響應式整頁縮放
通過媒體查詢改變根字體大小，實現不同屏幕下的全局縮放：
/* 默認 1rem = 16px */
html { font-size: 100%; }
/* 平板 */
@media (min-width: 768px) {
html { font-size: 112.5%; } /* 18px */
}
/* 桌面 */
@media (min-width: 1024px) {
html { font-size: 125%; } /* 20px */
}這樣所有使用 rem 的元素（字體、邊距、寬高等）都會按比例變化，無需逐一定義媒體查詢。
五、rem 與 px 的轉換技巧
推薦使用 62.5% 基準 或 Sass/PostCSS 插件 自動轉換。
計算函數（SCSS）：
@function rem($px) {
@return $px / 16 * 1rem;
}
.text {
font-size: rem(24); // 1.5rem
}六、最佳實踐與注意事項
推薦做法
根字體使用百分比（100% 或 62.5%），尊重用戶默認設置。
全局布局與字體用 rem，實現無障礙縮放。
邊框 border 建議用 px，因為邊框通常不需要隨字體縮放。
媒體查詢的斷點值用 em 或 rem，保證縮放時斷點同步：
@media (min-width: 48rem) { /* 768px 基于根16px */ }注意陷阱
嵌套時 rem 不受影響，這是優點，但也意味著無法像 em 那樣做局部微調（比如組件內部按父級比例縮放）。這時可以混用 em。
Chrome 開發者工具中 rem 計算值顯示為 px，調試時注意。
極老版本瀏覽器（IE8 及以下）不支持 rem，但現代項目已無需考慮。如需兼容，可提供 px 回退：
.box {
width: 160px;
width: 10rem;
}七、rem 的局限與替代思路
無法精確控制某個組件僅相對于自身 → 使用 em 或自定義屬性（CSS 變量）。
大規模動態切換主題字號（如一鍵放大）→ 可以改變根元素的 font-size，但可能影響所有 rem 元素。更精細的控制可結合 CSS 變量：
html {
--base-size: 16px;
font-size: var(--base-size);
}
.component {
font-size: calc(1rem * 1.2); /* 相對根 */
}八、總結
掌握 rem 是構建靈活、可訪問、易維護的響應式頁面的關鍵一步。在實際項目中，建議 rem 用于宏觀布局與排版，px 用于微小細節（如邊框、陰影），em 用于局部上下文比例，三者結合使用最為高效。
上一篇：網頁制作：calc() 函數詳解及在 width 屬性中的應用
