CSS 单位详解：px、rem、em、vw/vh 的区别与使用场景
CSS 单位详解：px、rem、em、vw/vh 的区别与使用场景
在 CSS 中，各种单位有不同的特性和适用场景，理解它们的区别对实现响应式布局至关重要。
1. 绝对单位 px
特点：
- 像素（Pixel）是绝对长度单位
- 1px 对应屏幕上的一个物理像素点（在高清屏上可能对应多个物理像素）
- 固定大小，不随其他因素改变
使用场景：
.border {width: 1px; /* 细边框 */
}
.icon {width: 24px; /* 固定尺寸图标 */
}
优点： 精确控制元素尺寸
缺点： 在响应式设计中不够灵活
2. 相对单位 rem
特点：
- 相对于根元素(html)的字体大小
- 默认情况下，1rem = 16px（浏览器默认字号）
- 可通过修改html字体大小改变所有rem单位的值
使用方式：
html {font-size: 62.5%; /* 1rem = 10px (16px×62.5%) */
}
.box {width: 20rem; /* 200px */padding: 1.5rem; /* 15px */
}
响应式适配方案：
// 根据设计稿宽度动态设置rem基准值
document.documentElement.style.fontSize = (document.documentElement.clientWidth / 设计稿宽度) * 100 + 'px';
优点： 方便整体缩放，适配不同屏幕
缺点： 需要计算转换
3. 相对单位 em
特点：
- 相对于当前元素或父元素的字体大小
- 1em = 当前元素的font-size值
- 多层嵌套时会产生复合效果
使用示例：
.parent {font-size: 20px;
}
.child {padding: 1em; /* 20px */margin: 0.5em; /* 10px */
}
.button {font-size: 1.2em; /* 相对于父级字体 */padding: 0.8em 1.5em; /* 相对于自身字体 */
}
优点： 适合组件内部相对尺寸
缺点： 嵌套复杂时计算困难
4. 视口单位 vw/vh
特点：
- vw (viewport width): 1vw = 视口宽度的1%
- vh (viewport height): 1vh = 视口高度的1%
- vmin/vmax: 取vw/vh中较小/较大的值
使用场景：
.header {height: 10vh; /* 视口高度的10% */
}
.banner {width: 80vw; /* 视口宽度的80% */
}
.modal {width: min(90vw, 1200px); /* 不超过1200px */
}
优点： 直接响应视口变化
缺点： 小屏幕上可能太小，大屏幕上可能太大
5. 单位对比表
| 单位 | 基准 | 是否响应式 | 典型应用场景 |
|---|---|---|---|
| px | 绝对 | 否 | 边框、固定尺寸元素 |
| rem | 根元素字体 | 是 | 整体布局、间距 |
| em | 当前/父元素字体 | 是 | 文本相关、按钮内边距 |
| vw/vh | 视口尺寸 | 是 | 全屏元素、大尺寸布局 |
| % | 父元素 | 是 | 流式布局、宽度高度 |
6. 实际开发建议
-
混合使用原则
- 使用rem设置主要布局尺寸
- 使用px设置边框、阴影等固定样式
- 使用em设置文本相关和组件内部间距
- 使用vw/vh设置全屏元素
-
移动端适配方案
/* 基于750px设计稿的rem适配 */
html {font-size: calc(100vw / 7.5); /* 100vw/750×100 */
}
/* 使用时直接除以100 */
.box {width: 3.2rem; /* 设计稿320px */
}
- 现代CSS方案
.container {width: clamp(300px, 80vw, 1200px); /* 最小值、理想值、最大值 */padding: max(2vw, 10px); /* 取较大值 */
}
理解这些单位的差异并根据场景合理选择，可以创建出既精确又灵活的响应式布局。