JavaScript教程：深入理解CSS单位px、em、rem及其他
项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info 在Web开发中，CSS单位的选择直接影响着页面的布局和响应式表现。本文将系统讲解各种CSS单位的特性和适用场景。
绝对单位：像素(px)
像素(px)是最基础、最直观的CSS单位，代表屏幕上的一个物理像素点。
关键特性：
- 绝对单位，不受其他因素影响
- 支持小数值（如16.5px）
- 浏览器最终将所有单位转换为像素
- 移动设备会自动进行缩放适配
<div style="width: 300px; height: 200px; background: #eee;">
这是一个300×200像素的盒子
</div>
适用场景：需要精确控制尺寸时，如图标、边框等。
相对单位：em
em单位相对于当前元素的字体大小。
特点：
- 1em = 当前字体大小
- 具有继承性，会受父元素影响
- 适合创建可伸缩的组件
<div style="font-size: 16px;">
父元素字体16px
<div style="font-size: 1.5em;">子元素字体24px(1.5×16)</div>
</div>
常见问题：多重嵌套时em会产生复合效果，可能导致字体过小。
根相对单位：rem
rem(root em)相对于根元素(html)的字体大小。
优势：
- 避免em的嵌套问题
- 方便全局调整尺寸
- 结合JS可实现整体缩放
<style>
html { font-size: 16px; }
.box { font-size: 1.5rem; } /* 始终为24px */
</style>
最佳实践：使用rem设置主要尺寸，配合媒体查询实现响应式。
百分比单位(%)
百分比单位的行为取决于所应用的CSS属性：
- font-size: 相对于父元素的字体大小
- width/height: 相对于父元素的对应尺寸
- margin/padding: 相对于父元素的宽度
- position: fixed时相对于视口
<div style="width: 200px;">
<div style="width: 50%;">宽度为100px</div>
</div>
视口单位：vw、vh、vmin、vmax
这些单位相对于视口尺寸：
- 1vw = 视口宽度的1%
- 1vh = 视口高度的1%
- vmin取vw和vh中较小值
- vmax取较大值
<div style="width: 50vw; height: 30vh; background: #ccc;">
这个盒子占据视口宽度50%，高度30%
</div>
移动端应用：特别适合创建全屏布局和响应式元素。
单位选择指南
| 单位 | 相对基准 | 适用场景 |
|---|---|---|
| px | 绝对单位 | 精确控制 |
| em | 当前字体 | 组件内部 |
| rem | 根字体 | 全局布局 |
| % | 父元素 | 流式布局 |
| vw/vh | 视口 | 全屏元素 |
专业建议：
- 使用rem作为主要单位
- 结合媒体查询调整根字体大小
- 组件内部使用em保持比例
- 需要精确控制时使用px
- 全屏元素使用视口单位
理解这些单位的特性和相互关系，可以帮助开发者创建更灵活、更易维护的响应式布局。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
