在CSS世界中，选择合适的单位就像挑选合适的工具一样重要。不同的单位有不同的特性和适用场景，用对了能让你的布局更灵活、更易维护。看完本篇内容你将了解px、em、rem和vw/vh这些常用单位，帮你做出更明智的选择。
1. 绝对单位：px
px（像素）是我们最熟悉的CSS单位，它是绝对单位，表示一个物理像素点。
<!DOCTYPE html>
<html>
<head>
<style>
.pixel-box {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="pixel-box">我是一个300px宽的盒子</div>
</body>
</html>
使用场景：
- 边框宽度（border）
- 需要精确控制的微小细节
- 不需要随字体大小变化的元素
特点：
- 固定大小，不受其他因素影响
- 在不同设备上物理尺寸可能不同（高DPI设备像素更密集）
2. 相对单位：em
em是相对单位，相对于当前元素的字体大小。如果当前元素没有设置字体大小，则继承父元素的字体大小。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
font-size: 20px;
padding: 1em; /* 20px */
}
.text {
font-size: 1.5em; /* 30px (20px × 1.5) */
margin-bottom: 0.5em; /* 15px (30px × 0.5) */
}
.inner-box {
font-size: 0.8em; /* 24px (30px × 0.8) */
padding: 1em; /* 24px */
}
</style>
</head>
<body>
<div class="container">
<div class="text">
这是一段文字
<div class="inner-box">内部盒子</div>
</div>
</div>
</body>
</html>
上面的代码可以这样理解：
┌─────────────────────────────────────┐
│ container │
│ font-size: 20px │
│ padding: 1em (20px) │
│ │
│ ┌─────────────────────────────┐ │
│ │ text │ │
│ │ font-size: 1.5em (30px) │ │
│ │ margin-bottom: 0.5em (15px) │
│ │ │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ inner-box │ │ │
│ │ │ font-size: 0.8em (24px) │ │
│ │ │ padding: 1em (24px) │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
使用场景：
- 需要根据当前字体大小调整间距的情况
- 组件内部的比例布局
注意事项：
- em会层层嵌套，可能导致尺寸计算复杂
- 不适合大规模布局，容易造成尺寸混乱
3. 相对单位：rem
rem（root em）也是相对单位，但它始终相对于**根元素（html）**的字体大小，不会受到父元素影响。
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 16px; /* 基准大小 */
}
.header {
font-size: 2rem; /* 32px */
padding: 1rem; /* 16px */
}
.content {
font-size: 1.5rem; /* 24px */
margin: 0.5rem; /* 8px */
}
/* 媒体查询调整基准大小 */
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="header">标题</div>
<div class="content">内容</div>
</body>
</html>
rem的计算方式更直观：
html (根元素)
└── font-size: 16px
│
├── .header (2rem = 32px, 1rem = 16px)
│
└── .content (1.5rem = 24px, 0.5rem = 8px)
使用场景：
- 响应式布局（通过改变根字体大小调整整个布局）
- 保持一致的比例关系
- 大多数需要相对单位的场景
4. 视口单位：vw/vh
vw（viewport width）和vh（viewport height）是相对于视口大小的单位。1vw = 视口宽度的1%，1vh = 视口高度的1%。
<!DOCTYPE html>
<html>
<head>
<style>
.fullscreen {
width: 100vw;
height: 100vh;
background-color: lightblue;
}
.half-width {
width: 50vw; /* 视口宽度的一半 */
background-color: lightcoral;
}
.quarter-height {
height: 25vh; /* 视口高度的四分之一 */
background-color: lightgreen;
}
/* 保持宽高比的盒子 */
.aspect-ratio-box {
width: 50vw;
height: calc(50vw * 9 / 16); /* 16:9比例 */
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="fullscreen">全屏元素</div>
<div class="half-width">半宽元素</div>
<div class="quarter-height">四分之一高元素</div>
<div class="aspect-ratio-box">16:9比例盒子</div>
</body>
</html>
视口单位示意图：
┌────────────────────────────────────────────────┐
│ viewport │
│ width: 100vw, height: 100vh │
│ │
│ ┌──────────────────────────────────────────┐ │
│ │ .fullscreen │ │
│ │ width:100vw, height:100vh │ │
│ │ │ │
│ │ ┌────────────────────────────────────┐ │ │
│ │ │ .half-width │ │ │
│ │ │ width:50vw │ │ │
│ │ └────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────┐ │ │
│ │ │ .quarter-height │ │ │
│ │ │ height:25vh │ │ │
│ │ └────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────┘ │
└────────────────────────────────────────────────┘
使用场景：
- 全屏布局或元素
- 创建保持宽高比的元素
- 需要根据视口大小调整的元素
单位对比与选择
| 单位 | 相对基准 | 使用场景 | 优点 | 缺点 |
|---|---|---|---|---|
| px | 绝对单位 | 边框、固定尺寸元素 | 精确控制 | 不灵活，不适应响应式 |
| em | 当前元素字体大小 | 组件内布局、文本相关间距 | 相对当前上下文 | 计算复杂，容易嵌套混乱 |
| rem | 根元素字体大小 | 全局布局、响应式设计 | 一致性好，易于管理 | 需要设置根字体大小 |
| vw/vh | 视口尺寸 | 全屏布局、视口相关尺寸 | 真正响应视口变化 | 可能过大或过小 |
实际应用建议
-
设置合理的根字体大小
html { font-size: 16px; /* 默认值 */ } /* 小屏幕调整 */ @media (max-width: 768px) { html { font-size: 14px; } } -
使用rem进行主要布局
.container { max-width: 80rem; /* 1280px (16px × 80) */ margin: 0 auto; padding: 1rem; } -
使用em处理组件内间距
.card { font-size: 1rem; padding: 1em; /* 相对于当前字体大小 */ } .card-title { font-size: 1.2em; margin-bottom: 0.5em; /* 相对于1.2em */ } -
结合使用vw和rem实现灵活响应
html { /* 在16px基础上随视口微调 */ font-size: calc(16px + 0.25vw); }
总结
选择合适的CSS单位需要根据具体场景：
- 需要精确控制时用px
- 处理文本相关布局用em
- 全局布局和响应式用rem
- 全屏或视口相关布局用vw/vh
