★ ★ ★ ★ ★

rem、em、px 的区别？

⚡ 速记答案（30 秒）

px 是绝对像素，简单直观但不随根字号变化。em 相对当前/父元素字体大小，会级联放大。rem 相对 html 根元素字体大小，全局统一、方便做响应式。常见套路：html { font-size: 62.5%; } → 1rem = 10px。

📖 详细讲解

标准面试回答（推荐记住）

px 是绝对单位，1px 就是 1 个像素点，简单直观但不能自适应。em 是相对单位，相对于当前元素或父元素的字体大小，缺点是会级联放大，嵌套多层后计算麻烦。rem 是相对于根元素 html 的字体大小，全局统一不会级联，非常适合做响应式布局。常见技巧是设置 html { font-size: 62.5%; }，这样 1rem 就等于 10px，方便计算。

单位对比

单位	基准	级联	适用场景
px	像素	—	固定尺寸、边框
em	父/当前元素字号	会	组件内相对尺寸
rem	html 根元素字号	不会	全局响应式布局

级联问题演示

/* em 的级联问题 */
.parent { font-size: 1.2em; }  /* 假设基准 16px → 19.2px */
.child { font-size: 1.2em; }   /* 19.2 × 1.2 = 23.04px */
.grandchild { font-size: 1.2em; } /* 23.04 × 1.2 = 27.65px */

/* rem 不会级联 */
.parent { font-size: 1.2rem; }    /* 16 × 1.2 = 19.2px */
.child { font-size: 1.2rem; }     /* 16 × 1.2 = 19.2px */

✅ 面试要点

•px 固定、em 级联、rem 全局统一
•rem 适合响应式布局
•62.5% 技巧让 1rem = 10px

💻 代码示例

rem 响应式布局

/* 基准设置 */
html {
  font-size: 62.5%; /* 16px × 62.5% = 10px */
}

/* 使用 rem */
.container {
  width: 32rem;     /* 320px */
  padding: 1.6rem;  /* 16px */
  font-size: 1.4rem; /* 14px */
}

/* 响应式调整 */
@media (max-width: 768px) {
  html { font-size: 56.25%; } /* 9px 基准 */
}