面试题：说说 px、em、rem 的区别及使用场景
px、em、rem 是 CSS 中常用的长度单位，它们在参考基准、继承行为和响应式能力上有显著区别。理解它们的差异对于构建可维护、可访问、响应式的网页至关重要。
一、基本概念与区别
| 单位 | 全称 | 参考基准 | 是否继承 | 是否响应缩放 |
|---|---|---|---|---|
px | Pixels（像素） | 相对于屏幕物理像素或 CSS 像素 | 否 | ❌ 固定，不随用户设置变化 |
em | 无 | 相对于父元素的 font-size | ✅ 是 | ✅ 随父级字体变化 |
rem | Root em | 相对于根元素（<html>）的 font-size | ❌ 否 | ✅ 随根字体变化 |
二、详细解析
✅ 1. px（像素）
- 绝对单位，1px 通常对应屏幕上的一个物理像素（在 DPR=1 时）。
- 不会继承，也不受父元素字体影响。
- 固定大小，用户缩放浏览器或调整字体时，
px不会自动调整。
示例：
.text {
font-size: 16px;
}🔹 优点：精确控制，直观。
🔹 缺点：缺乏弹性，不利于可访问性（Accessibility）。
✅ 2. em（相对单位）
- 相对于父元素的字体大小。
- 会继承，且存在级联放大/缩小问题。
示例：
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 1.5 × 20px = 30px */
}⚠️ 注意：嵌套时的“连锁反应”
<div style="font-size: 20px;">
<div style="font-size: 1.5em;"> <!-- 30px -->
<div style="font-size: 1.5em;"> <!-- 45px，不是 30px！ --> </div>
</div>
</div>🔹 优点：灵活，响应父级变化。
🔹 缺点：嵌套层级多时，尺寸难以控制，容易失控。
✅ 3. rem（根 em）
- 相对于
<html>根元素的font-size。 - 不继承父元素字体，只依赖根字体。
- 避免了
em的级联问题。
示例：
html {
font-size: 16px;
}
.box {
font-size: 2rem; /* 2 × 16px = 32px */
margin: 1.5rem; /* 24px */
}🔹 优点：弹性好，易于维护，适合响应式设计。
🔹 缺点：需设置根字体，老浏览器兼容性需注意（IE9+ 支持）。
三、使用场景对比
| 场景 | 推荐单位 | 原因 |
|---|---|---|
| 精确像素控制（如边框、阴影） | px | 不希望随字体变化 |
| 响应式布局（宽度、边距、内边距） | rem | 统一基准，易于控制整体缩放 |
| 组件内部相对尺寸（如按钮内图标） | em | 相对于组件自身字体，实现等比缩放 |
| 可访问性优先的字体 | rem 或 em | 用户调整浏览器字体时，页面能正常缩放 |
| 移动端适配 | rem 或 vw | 配合 JS 动态设置根字体，实现等比缩放 |
| 图标、装饰性元素 | em | 随文字大小自动调整，保持比例 |
四、实战建议（面试加分点）
✅ 1. 推荐的根字体设置
html {
font-size: 16px; /* 显式设置，避免浏览器默认差异 */
}或移动端适配：
// 动态设置 rem 基准
function setRem() {
const designWidth = 375;
const scale = document.documentElement.clientWidth / designWidth;
document.documentElement.style.fontSize = (16 * scale) + 'px';
}✅ 2. 可访问性最佳实践
/* 允许用户缩放 */
body {
font-size: 1rem; /* 基于用户浏览器设置 */
}✅ 3. 混合使用示例
.button {
padding: 0.75em 1.5em; /* 用 em，按钮内边距随字体缩放 */
font-size: 1rem; /* 用 rem，统一字体基准 */
border-radius: 0.5rem; /* 用 rem，圆角随整体缩放 */
}五、总结对比表
| 单位 | 参考对象 | 是否继承 | 响应性 | 推荐使用场景 |
|---|---|---|---|---|
px | 屏幕像素 | 否 | ❌ | 精确控制、边框、阴影 |
em | 父元素字体 | ✅ | ✅ | 组件内部相对尺寸、图标 |
rem | 根元素字体 | ❌ | ✅✅ | 字体、布局、响应式、可访问性 |
💬 一句话总结：
“
px是固定单位，适合精确控制；em相对于父元素，适合组件内部缩放；rem相对于根元素，是响应式和可访问性布局的首选。”
在面试中，能结合可访问性、响应式设计和实际项目场景说明选择依据，会显得你具备工程化思维和用户体验意识。
THE END
