【前端】常用单位详解：vw、vh、em、rem

✅ 1. vw（viewport width）

• 含义：相对于视口宽度的百分比。
• 示例：10vw = 视口宽度的 10%。
• 应用场景：横向自适应布局（如 Banner）。

+------------------------- 屏幕宽度 --------------------------+
|                                                            |
|  <------ 10vw ------>                                      |

---

✅ 2. vh（viewport height）

• 含义：相对于视口高度的百分比。
• 示例：50vh = 视口高度的 50%。
• 应用场景：全屏布局、高度自适应。

屏幕高度
|    
|    =========
|    50vh 高度
|    =========
|

---

✅ 3. em（相对于父元素字体大小）

• 含义：相对于父元素的字体大小。
• 示例：父元素 font-size: 20px，子元素 2em → 实际是 40px。
• 注意：会嵌套放大，计算复杂。

---

✅ 4. rem（root em，相对于根元素）

• 含义：相对于根元素 html 的字体大小。
• 示例：

html { font-size: 16px; }
p { font-size: 1.5rem; } /* 实际是 24px */

• 特点：不受嵌套影响，适合全局统一控制。

---

✅ 5. 常见单位对比表

单位	含义	场景	响应式
vw	视口宽度	横向自适应	✅
vh	视口高度	全屏布局	✅
em	父元素字体大小	字体/边距（嵌套放大）	✅
rem	根元素字体大小	字体/间距/整站	✅
px	像素	精准控制	❌

---

📌 小结

• 📏 vw/vh：屏幕自适应布局首选。
• 🔗 em/rem：推荐用 rem 做全局字号，em 用在局部（如按钮内 padding）。
• 🎯 px：用于像素级精确布局（如 1px 边框）。

---

🚀 推荐做法

html {
  font-size: 16px;
}

• 用 rem 统一设置字体、间距；
• 用 vw/vh 做全屏/自适应；
• 需要精准像素时用 px。