请谈谈em、px、rem、vh、vw的区别，如何使用？

创业
2025-09-04 11:39:02

一、核心单位特性对比单位基准对象计算特点典型应用场景坑点预警px设备像素绝对单位，1px=1物理像素边框、固定尺寸元素Retina屏显示过粗em当前元素字体大小多重继承，计算复杂度高行高、相对字体间距嵌套导致尺寸失控rem根元素字体大小单点控制，计算链路清晰全局布局、响应式组件未重置根字体导致意外缩放vw视口宽度1vw=1%视口宽全屏布局、视口比例元素移动端浏览器兼容差异vh视口高度1vh=1%视口高高度自适应区块移动端地址栏影响计算

二、深度使用指南 1. px：精确控制的利刃 /* 固定尺寸元素 */ .icon { width: 24px; /* 始终显示为24物理像素 */ height: 24px; /* 适合需要像素级对齐的场景 */ } /* Retina屏适配方案 */ @media (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #ccc; /* 使用0.5px实现真正细边框 */ } }

注意：Safari等浏览器可能不支持0.5px，需配合transform实现

2. em：上下文敏感的弹簧 /* 嵌套字体系统 */ .card { font-size: 16px; padding: 1em; /* 16px */ } .card-title { font-size: 1.2em; /* 19.2px */ margin-bottom: 0.5em; /* 9.6px */ }

典型翻车现场：三层嵌套后尺寸指数级增长

3. rem：全局掌控的艺术  <html style="font-size: 62.5%;">  <body> <div class="container" style="width: 32rem;">  </body> /* 响应式调整 */ @media (max-width: 768px) { html { font-size: 50%; /* 1rem = 8px */ } }

最佳实践：配合Sass函数提升可维护性

@function rem($px) { @return ($px / 16) * 1rem; } .box { width: rem(320); // 自动转换为20rem } 4. vw/vh：视口舞者 /* 全屏布局方案 */ .hero-section { width: 100vw; height: 100vh; /* 小心移动端地址栏问题 */ padding: 5vw; /* 视口比例留白 */ } /* 流体字号 */ .title { font-size: clamp(2rem, 4vw, 3rem); /* 动态范围限制 */ }

移动端救星：修复100vh问题

.full-height { height: 100vh; height: -webkit-fill-available; /* 兼容Safari */ }

三、单位组合技 1. 响应式栅格系统 .grid-item { width: calc(33.33% - 2rem); margin: 1rem; @media (max-width: 480px) { width: calc(50vw - 3rem); /* 移动端适配 */ } } 2. 动态间距系统 :root { --space-unit: 1rem; } .spacing-xs { margin: calc(var(--space-unit) * 0.5); /* 8px */ } .spacing-xl { margin: calc(var(--space-unit) * 2 + 1vw); /* 动态扩展 */ } 3. 视口比例容器 .aspect-box { width: 50vw; height: calc(50vw * 9/16); /* 16:9比例 */ position: relative; }

四、避坑指南 1. em的继承陷阱 /* 错误示例 */ .parent { font-size: 20px; } .child { font-size: 0.8em; /* 16px */ padding: 2em; /* 32px! 而非预期的40px */ }

解决方案：改用rem或明确声明上下文

2. vh的移动端适配 // 动态修正vh值 function setRealVh() { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } window.addEventListener('resize', setRealVh); .modal { height: calc(var(--vh, 1vh) * 100); } 3. rem基准重置风险 /* 危险操作 */ html { font-size: 10px; /* 破坏浏览器默认缩放 */ } /* 推荐方案 */ html { font-size: 62.5%; /* 保持用户默认缩放 */ }

五、单位选择决策树

是否需要精确物理像素级控制？

是 → 使用px（边框、图标）否 → 进入下一步

是否需要相对于父元素字体？

是 → 使用em（行高、文本相关间距）否 → 进入下一步

是否需要全局比例控制？

是 → 使用rem（布局、组件尺寸）否 → 进入下一步

是否需要视口比例响应？

是 → 使用vw/vh（全屏元素、流体字号）否 → 考虑百分比或现代CSS单位（fr、min-content等）

六、未来趋势展望

容器查询单位（cqw/cqh）

.card { container-type: inline-size; } @container (width > 400px) { .title { font-size: max(2cqi, 1.5rem); } }