CSS中px、rem、em、vw有什么区别？前端单位完全指南
2026年2月 · 阅读时间 5分钟
CSS单位是前端开发的基础知识，但很多开发者对各种单位的区别和使用场景并不清楚。这篇文章帮你彻底搞懂。
px — 像素（绝对单位）
px是最常用的CSS单位，1px对应屏幕上的一个物理像素（在标准DPI下）。
- 优点：精确控制，所见即所得
- 缺点：不响应用户的字体大小设置，不利于无障碍访问
- 适用：边框、阴影、固定尺寸图标
rem — 根元素相对单位
rem相对于根元素（html）的font-size。默认情况下，浏览器的根字号是16px，所以1rem = 16px。
html { font-size: 16px; }
/* 1rem = 16px, 1.5rem = 24px, 0.875rem = 14px */
/* 1rem = 16px, 1.5rem = 24px, 0.875rem = 14px */
- 优点：响应用户字体偏好，全局统一缩放
- 缺点：需要心算转换（可以用 CSS单位转换器）
- 适用：字体大小、间距、布局尺寸（推荐首选）
em — 父元素相对单位
em相对于当前元素的font-size（如果用于font-size属性，则相对于父元素）。
- 优点：组件内部自适应缩放
- 缺点：嵌套时会产生复合效应（1.2em × 1.2em = 1.44em）
- 适用：组件内的padding、margin（相对于自身字号）
vw / vh — 视口单位
vw和vh分别是视口宽度和高度的1%。100vw = 视口全宽，100vh = 视口全高。
- 优点：完美适配不同屏幕尺寸
- 缺点：在移动端vh可能受地址栏影响
- 适用：全屏布局、响应式字体、hero区域
% — 百分比
百分比相对于父元素的对应属性。width: 50% 表示父元素宽度的一半。
- 适用：流式布局、响应式宽度
实际开发建议
✅ 字体大小 → 用 rem
✅ 间距和内边距 → 用 rem 或 em
✅ 边框和阴影 → 用 px
✅ 全屏布局 → 用 vh/vw
✅ 响应式宽度 → 用 %
❌ 避免全部用px → 不利于无障碍和响应式
快速转换参考
12px = 0.75rem
14px = 0.875rem
16px = 1rem（默认）
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
32px = 2rem
需要更多转换？试试我们的 CSS单位在线转换器，支持px/rem/em/vw/vh/pt/%一键互转。
更多开发者工具请访问 www.cyunyun.com。