【前端知识点总结】px, rem, em, vw/vh 等单位的区别与应用
2026/7/27 23:46:16 网站建设 项目流程

目录

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

是什么?

怎么用?

适用场景

注意事项

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

是什么?

怎么用?

适用场景

注意事项

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

是什么?

怎么用?

适用场景

注意事项

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

是什么?

怎么用?

适用场景

注意事项

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

是什么?

适用场景

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

场景一:移动端 H5 页面

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

场景三:活动页 / 营销页

7. 总结

⚠️ 核心注意事项:

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

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

是什么?

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

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询