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 属性中的应用
