CSS篇：前端干货！1分钟分清rem、em、vw和%的区别✨

🎓 作者简介 ： 前端领域优质创作者

🚪 资源导航： 传送门=>

🎬 个人主页： 江城开朗的豌豆

🌐 个人网站: 江城开朗的豌豆 🌍

📧 个人邮箱: [email protected] 📩

💬 个人微信: y_t_t_t_ 📱

📌 座右铭: 生活就像心电图，一帆风顺就证明你挂了。 💔

👥 QQ群: 906392632 (前端技术交流群) 💬

引言

在前端开发中，CSS单位的选择直接影响页面的布局适配能力。不同的单位（如rem、em、vw/vh、%）适用于不同的场景，理解它们的计算规则和适用场景，能帮助我们更高效地实现响应式设计。本文将深入对比这些单位，并给出实际应用建议。

1. rem（Root EM）

定义

rem（Root EM）是相对于**根元素（<html>）的font-size**计算的单位。

计算方式

默认情况下，浏览器根元素的font-size为16px，因此 1rem = 16px。
可以通过修改html的font-size来调整rem的基准值：
css 复制代码
```
html {
  font-size: 10px; /* 1rem = 10px */
}
```

适用场景

✅ 全局响应式布局 （如移动端适配）

✅ 需要整体缩放的元素（如字体、间距、宽高）

示例

css 复制代码

.container {
  width: 20rem; /* 20 × 10px = 200px */
  padding: 1rem; /* 10px */
}

2. em（相对父级单位）

定义

em 是相对于**父元素的font-size**计算的单位。

计算方式

如果父元素的font-size是16px，则 1em = 16px。

嵌套时计算会累积，容易导致尺寸失控：

css 复制代码

.parent { font-size: 16px; }
.child { font-size: 0.8em; } /* 16px × 0.8 = 12.8px */
.grandchild { font-size: 0.8em; } /* 12.8px × 0.8 = 10.24px */

适用场景

✅ 局部样式调整 （如按钮内边距、图标对齐）

❌ 不适合多层嵌套布局（计算复杂）

示例

css 复制代码

.button {
  font-size: 1em; /* 继承父级字体 */
  padding: 0.5em 1em; /* 相对父级字体计算 */
}

3. vw / vh（视窗单位）

定义

vw（Viewport Width）：1vw = 视窗宽度的1%
vh（Viewport Height）：1vh = 视窗高度的1%

计算方式

如果视窗宽度是1200px，则 10vw = 120px。
不受父元素影响，直接基于浏览器窗口计算。

适用场景

✅ 全屏布局 （如轮播图、背景图）

✅ 视窗比例适配（如弹窗、浮动元素）

示例

css 复制代码

.fullscreen-banner {
  width: 100vw; /* 占满整个视窗宽度 */
  height: 50vh; /* 视窗高度的一半 */
}

4. 百分比（%）

定义

百分比单位是相对于父元素的对应属性计算的，不同属性的参照对象可能不同。

计算方式

width: 50% → 父元素宽度的50%
padding-top: 50% → 参照父元素的宽度（而不是高度！）

适用场景

✅ 流式布局 （如栅格系统、弹性盒子）

✅ 依赖父级尺寸的元素（如自适应容器）

示例

css 复制代码

.parent {
  width: 200px;
}
.child {
  width: 50%; /* 100px */
  padding-top: 25%; /* 50px（基于父元素宽度计算） */
}

5. 对比总结

单位	参照对象	特点	适用场景
`rem`	根元素`font-size`	全局可控，适合响应式	移动端适配、全局缩放
`em`	父元素`font-size`	嵌套易混乱	局部样式（按钮、图标）
`vw/vh`	视窗宽高	直接响应视窗变化	全屏布局、视窗比例适配
`%`	父元素对应属性	依赖父级结构	流式布局、栅格系统

6. 最佳实践建议

移动端适配 → rem + 媒体查询

css 复制代码

html {
  font-size: calc(10px + 0.5vw); /* 动态调整基准值 */
}

全屏元素 → vw/vh
css 复制代码
```
.hero-section {
  height: 100vh;
}
```
流式布局 → % + flex/grid
避免em嵌套问题 → 仅在局部使用，或改用rem

结语

不同的CSS单位各有优劣，理解它们的计算规则和适用场景，能让我们更灵活地实现响应式设计。建议在项目中结合rem、vw/vh和百分比，根据需求选择最佳方案。

欢迎在评论区交流你的CSS单位使用心得！ 🚀

欢迎在评论区分享你的想法和建议！如果你觉得这篇文章有用，别忘了点赞和收藏哦~