CSS中的单位看似简单，实际却直接影响页面的可维护性和适配能力。绝对单位以固定值呈现，相对单位则根据参照物动态计算，两者各有适用场景。理解它们的计算规则和差异，是写出高质量样式代码的基础。
一、绝对单位的特点与常见类型
绝对单位指的是值一旦设定就不再依赖其他条件变化的单位，最常见的就是px（像素），此外还有pt（点，常用于打印样式）、cm、mm、in等物理单位。在日常屏幕开发中，px几乎是我们接触最多的单位。
px的表现很直观：写多少就是多少。一个元素设置为width: 200px，无论父容器字号是多大、视口尺寸是多少，它都保持200像素宽。这种确定性带来了两个好处：一是视觉还原度高，设计稿标注什么就写什么；二是调试方便，开发者工具中看到的就是实际渲染值。
但绝对单位的缺点同样明显。当用户在浏览器中调整默认字号，或者页面需要在从小屏手机到大屏显示器之间切换时，使用px定义的字体大小完全不会响应。例如：
body {
font-size: 16px; /* 用户即使把浏览器默认字号调到20，页面字体也不会变化 */
}
这对无障碍访问是不友好的。视力不佳的用户习惯放大浏览器字号，如果整站都用px写死，用户的需求就无法被满足。因此现代CSS实践中，px更适合用在边框宽度、阴影偏移这类不希望随字体缩放的细节属性上。
二、相对单位的计算原理
相对单位的核心是参照物。不同单位的参照物不同，计算结果也完全不同，这是初学者最容易混淆的地方。
em基于父元素（或当前元素）的字号。当em用于font-size时，参照的是父元素的字号；用于其他属性如padding、margin时，参照的是当前元素自身的字号。这种双重规则容易导致嵌套陷阱：
.parent {
font-size: 16px;
}
.child {
font-size: 1.2em; /* 16 * 1.2 = 19.2px */
}
.child .child {
font-size: 1.2em; /* 19.2 * 1.2 = 23.04px，逐层放大 */
}
多层嵌套后字号不断累乘，结果往往超出预期，排查起来相当费劲。
rem基于根元素字号。rem（root em）只参照html元素的font-size，与父元素无关。假设根字号是16px，那么2rem永远是32px，无论元素嵌套多少层。这解决了em的嵌套问题，也让全局缩放变得简单——只要修改根字号，所有使用rem的尺寸都会等比例变化：
html {
font-size: 16px;
}
.title {
font-size: 1.5rem; /* 24px */
}
.button {
padding: 0.5rem 1.5rem;
}
/* 移动端缩小根字号，整体等比缩小 */
@media (max-width: 480px) {
html {
font-size: 14px;
}
}
vw和vh基于视口尺寸。1vw等于视口宽度的百分之一，1vh等于视口高度的百分之一。它们不依赖任何元素，只看浏览器窗口大小，非常适合做全屏布局或随屏幕变化的响应式尺寸。此外还有百分比单位%，它参照的是父元素的对应属性值，比如宽度参照父元素宽度，需要单独记忆。
三、实际项目中的选择策略
没有绝对完美的单位，关键在于按属性分工使用。经过大量项目验证，目前社区比较推荐的组合方式是：
- 字体大小用rem：配合根字号设置，既能响应浏览器字号设置，又便于全局缩放，移动端适配方案大多基于此。
- 组件内部间距用em：比如按钮的内边距用
em，当按钮字号变大时内边距自动跟随，保持视觉比例协调。 - 边框、阴影用px：1px的细边框不应该因为字体放大而变成2px，固定值更合理。
- 全屏布局用vw和vh：首屏高度
100vh、流式排版用vw都能减少媒体查询的编写。
一个实用的参考是移动端适配中的rem方案：通过JavaScript监听屏幕宽度，动态计算根字号，再让所有尺寸都用rem书写，整页就能跟随屏幕等比缩放。而纯粹的vw方案则省去JS，直接用vw标注所有尺寸，配合postcss-px-to-viewport插件可以自动把设计稿的px值转换过来，开发体验相当顺畅。
还要注意一个细节：百分比和em在不同属性上的参照规则不同。比如margin: 10%无论水平还是垂直方向，都参照父元素的宽度计算，这一点常被误解为高度。了解这些规则后，遇到尺寸不符合预期的情况就能快速定位原因。
总结来说，绝对单位提供稳定性，相对单位提供弹性。现代布局的趋势是尽量使用相对单位，让页面天然适应用户设置和设备变化，把px留给那些确实需要固定不变的细节。掌握每种单位的参照规则，再按属性场景合理分配，就能写出既灵活又可控的样式代码。