CSS 单位指南

在前端开发中，CSS 单位的选择直接影响着页面的布局效果和响应式表现。本文将系统介绍 CSS 中各种单位的特性、使用场景和最佳实践，帮助你做出更明智的选择。

一、CSS 单位分类全景图

CSS 单位可分为两大阵营：绝对单位 和相对单位，各有其适用场景。以下是它们的分类结构：

graph TD A[CSS单位] --> B[绝对单位] A --> C[相对单位] B --> D[px] B --> E[cm/mm/in/pt/pc] C --> F[字体相关] C --> G[视口相关] F --> H[em] F --> I[rem] F --> J[ex/ch] G --> K[vw/vh] G --> L[vmin/vmax]

二、绝对单位：固定且精确

（一）像素（px）

.box {
  width: 300px; /* 固定尺寸 */
  font-size: 16px; /* 常见基准字号 */
}

特点：

• 与设备物理像素相关，但在不同 DPI 设备上表现可能不同。
• 适合边框、阴影等需要精确控制的效果。
• 在高分辨率设备上，可能需要额外适配。

（二）物理单位（cm、mm、in）

@media print {
  .page {
    width: 21cm; /* A4 纸宽度 */
    height: 29.7cm;
  }
}

适用场景：

• 主要用于打印样式表，确保打印内容符合物理尺寸要求。
• 不适用于屏幕显示，因为屏幕像素密度差异较大。

三、相对单位：响应式的基石

（一）em：基于上下文的相对单位

<div class="parent">
  父元素
  <div class="child">子元素</div>
</div>

.parent {
  font-size: 20px;
  padding: 2em; /* 40px */
}

.child {
  font-size: 0.8em; /* 16px */
  margin: 1.5em; /* 24px */
}

特性：

• 相对于当前元素的 font-size。
• 复合使用时需要小心计算，容易出现嵌套问题。

（二）rem：根元素相对单位

html {
  font-size: 62.5%; /* 1rem = 10px */
}

.header {
  font-size: 2.4rem; /* 24px */
  padding: 1.5rem; /* 15px */
}

优势：

• 统一参照 html 字体大小，易于维护和计算。
• 响应式适配只需修改根字号，全局生效。

（三）视口单位：动态适配神器

单位	含义	示例
vw	视口宽度的 1%	width: 50vw → 视口一半宽度
vh	视口高度的 1%	height: 100vh → 满屏高度
vmin	视口较小尺寸的 1%	font-size: 4vmin
vmax	视口较大尺寸的 1%	padding: 2vmax

典型应用：

.hero-section {
  height: 100vh; /* 首屏高度 */
  font-size: calc(1rem + 1vw); /* 流体字号 */
}

优势：

• 动态适配视口大小，无需媒体查询即可实现响应式布局。
• 适合全屏元素、流体字号等场景。

四、特殊场景单位

（一）文本相关单位

p {
  text-indent: 2ch; /* 2 个字符宽度 */
  line-height: 1.5; /* 无单位，相对于当前字号 */
}

适用场景：

• ch 用于基于字符宽度的缩进或对齐。
• line-height 无单位时，相对于当前字号，便于统一管理。

（二）百分比单位

.container {
  width: 80%; /* 相对于父元素宽度 */
}

img {
  max-width: 100%; /* 响应式图片基础 */
}

特性：

• 相对于父元素的尺寸，适合构建弹性布局。
• 在响应式设计中，常用于宽度、高度等属性。

五、单位选择策略

（一）响应式设计推荐方案

/* 基准设置 */
html {
  font-size: 62.5%; /* 10px */
}

@media (min-width: 768px) {
  html {
    font-size: 75%; /* 12px */
  }
}

/* 组件样式 */
.card {
  padding: 1.5rem; /* 响应式变化 */
  margin-bottom: 2rem;
  font-size: 1.6rem;
  width: 100%;
  
  @media (min-width: 1024px) {
    width: 50vw;
  }
}

策略：

• 使用 rem 作为基准单位，便于全局调整。
• 结合媒体查询调整根字号，实现响应式布局。
• 对于宽度、高度等布局属性，优先使用 vw、vh 或百分比单位。

（二）单位搭配原则

1. 布局尺寸 ：优先使用 rem 或 vw。
2. 内边距/外边距 ：使用 rem 或 em。
3. 字体大小 ：使用 rem，结合媒体查询调整。
4. 边框/阴影 ：使用固定 px，确保精确控制。
5. 全屏元素 ：使用 100vh 或 100vw。

六、常见问题解决方案

（一）移动端 1px 边框问题

.border-thin {
  position: relative;
}

.border-thin::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #000;
  transform: scaleY(0.5); /* 适配高分辨率设备 */
}

原理：

• 使用伪元素模拟边框，通过 transform: scaleY(0.5) 缩放高度，解决移动端 1px 边框在高分辨率设备上过粗的问题。

（二）避免 vw 单位滚动条问题

body {
  width: 100vw;
  overflow-x: hidden;
}
/* 或 */
html {
  overflow-x: hidden;
}

原理：

• 通过设置 overflow-x: hidden，防止因滚动条导致的宽度计算问题。

结语

没有最好的单位，只有最合适的单位组合。根据项目需求灵活选择，才能打造出完美的响应式体验。在实际开发中，建议多尝试不同单位的组合，找到最适合当前项目的设计方案。