【前端知识点总结】px, rem, em, vw/vh 等单位的区别与应用

目录

1. px：绝对单位的老大哥

是什么？

怎么用？

适用场景

注意事项

2. em：相对父元素的“继承者”

是什么？

怎么用？

适用场景

注意事项

3. rem：移动端适配的神器

是什么？

怎么用？

适用场景

注意事项

4. vw/vh：视口单位的“视界”

是什么？

怎么用？

适用场景

注意事项

5. %：百分比的流式布局

是什么？

适用场景

6. 企业开发中的实际应用与策略

场景一：移动端 H5 页面

场景二：PC 端后台管理系统

场景三：活动页 / 营销页

7. 总结

⚠️ 核心注意事项：

在编写 CSS 时，选择正确的单位是构建响应式、可维护页面的第一步。有时面对 px、rem、vw 等单位时容易感到困惑：到底该用哪个？为什么在这个页面用 rem 在那个页面又要用 vw？

1. px：绝对单位的老大哥

是什么？

px (Pixel) 即像素，是 CSS 中最基本、最常用的绝对单位。它代表屏幕上的一个物理点（或者是逻辑像素，取决于设备像素比 DPR）。一旦设置，它的大小就是固定的，不会随父元素或视口变化而变化。