em/px/rem/vh/vw区别

🔢 计算公式总结：

1. rem

css

复制编辑

rem = px / html 的 font-size

例：html 设置为 20px，则 40px = 2rem

---

2. em

css

复制编辑

em = px / 父元素的 font-size

例：父元素 font-size: 16px，则 24px = 1.5em

---

3. vw

css

复制编辑

vw = (元素宽度 px) / (视口宽度 px) * 100

例：元素 200px，视口宽度 1000px → 200 / 1000 * 100 = 20vw

---

4. vh

css

复制编辑

vh = (元素高度 px) / (视口高度 px) * 100

例：元素 450px，视口高度 900px → 450 / 900 * 100 = 50vh