在前端开发中，CSS 单位的选择直接影响着页面的布局效果和响应式表现。本文将系统介绍 CSS 中各种单位的特性、使用场景和最佳实践，帮助你做出更明智的选择。
一、CSS 单位分类全景图
CSS 单位可分为两大阵营：绝对单位和相对单位，各有其适用场景。以下是它们的分类结构：
二、绝对单位：固定且精确
（一）像素（px）
特点：
- 与设备物理像素相关，但在不同 DPI 设备上表现可能不同。
- 适合边框、阴影等需要精确控制的效果。
- 在高分辨率设备上，可能需要额外适配。
（二）物理单位（cm、mm、in）
适用场景：
- 主要用于打印样式表，确保打印内容符合物理尺寸要求。
- 不适用于屏幕显示，因为屏幕像素密度差异较大。
三、相对单位：响应式的基石
（一）em：基于上下文的相对单位
特性：
- 相对于当前元素的 font-size。
- 复合使用时需要小心计算，容易出现嵌套问题。
（二）rem：根元素相对单位
优势：
- 统一参照 html字体大小，易于维护和计算。
- 响应式适配只需修改根字号，全局生效。
（三）视口单位：动态适配神器
典型应用：
优势：
- 动态适配视口大小，无需媒体查询即可实现响应式布局。
- 适合全屏元素、流体字号等场景。
四、特殊场景单位
（一）文本相关单位
适用场景：
- ch用于基于字符宽度的缩进或对齐。
- line-height无单位时，相对于当前字号，便于统一管理。
（二）百分比单位
特性：
- 相对于父元素的尺寸，适合构建弹性布局。
- 在响应式设计中，常用于宽度、高度等属性。
五、单位选择策略
（一）响应式设计推荐方案
策略：
- 使用 rem作为基准单位，便于全局调整。
- 结合媒体查询调整根字号，实现响应式布局。
- 对于宽度、高度等布局属性，优先使用 vw、vh或百分比单位。
（二）单位搭配原则
- 布局尺寸：优先使用 rem 或 vw。
- 内边距/外边距：使用 rem 或 em。
- 字体大小：使用 rem，结合媒体查询调整。
- 边框/阴影：使用固定 px，确保精确控制。
- 全屏元素：使用 100vh 或 100vw。
六、常见问题解决方案
（一）移动端 1px 边框问题
原理：
使用伪元素模拟边框，通过 transform: scaleY(0.5)缩放高度，解决移动端 1px 边框在高分辨率设备上过粗的问题。
（二）避免 vw单位滚动条问题
原理：
通过设置 overflow-x: hidden，防止因滚动条导致的宽度计算问题。
结语
没有最好的单位，只有最合适的单位组合。根据项目需求灵活选择，才能打造出完美的响应式体验。在实际开发中，建议多尝试不同单位的组合，找到最适合当前项目的设计方案。