在CSS的样式设置中，长度单位是定义元素尺寸、间距、字体大小等属性的基础，相对长度单位指的是相对于其他长度值来计算最终尺寸的单位，相比绝对长度单位有更好的适配性，适合响应式页面开发。
CSS常见相对长度单位汇总
CSS规范中定义的相对长度单位主要有以下这些，不同单位的参照基准存在差异：
- em：相对于当前元素的字体大小计算
- rem：相对于根元素（html元素）的字体大小计算
- ex：相对于当前字体的x-height高度，即小写字母x的高度
- ch：相对于当前字体的字符0的宽度
- vw：相对于视口宽度的1%
- vh：相对于视口高度的1%
- vmin：相对于视口宽度和高度中较小的那个的1%
- vmax：相对于视口宽度和高度中较大的那个的1%
- %：相对于父元素的对应属性值计算
em单位详解
em的计算规则
em单位的计算基准是当前元素自身的字体大小，如果当前元素没有设置字体大小，会继承父元素的字体大小，直到找到根元素的字体大小作为最终基准。默认情况下，浏览器的根元素字体大小是16px，所以1em在默认状态下等于16px。
em使用示例
下面通过一个嵌套结构的案例展示em的计算逻辑：
/* 根元素默认字体大小16px */
html {
font-size: 16px;
}
/* 父元素设置字体大小为20px，1em=20px */
.parent {
font-size: 20px;
width: 10em; /* 10 * 20px = 200px */
padding: 1em; /* 1 * 20px = 20px */
}
/* 子元素未设置字体大小，继承父元素的20px，1em=20px */
.child {
width: 5em; /* 5 * 20px = 100px */
margin: 0.5em; /* 0.5 * 20px = 10px */
}
/* 子元素单独设置字体大小为24px，1em=24px */
.child-custom {
font-size: 24px;
height: 2em; /* 2 * 24px = 48px */
}
em的使用注意事项
em单位存在继承传递的问题，当嵌套层级较多时，每一层的em计算基准都会变化，容易出现尺寸计算不符合预期的情况，需要逐层确认字体大小的继承关系。
rem单位详解
rem的计算规则
rem是root em的缩写，计算基准始终是根元素（html元素）的字体大小，无论元素嵌套多少层，只要根元素的字体大小不变，1rem的数值就固定不变。默认状态下根元素字体大小16px，1rem=16px。
rem使用示例
下面的案例展示rem的固定基准特性：
/* 根元素设置字体大小为16px，1rem=16px */
html {
font-size: 16px;
}
/* 父元素字体大小变化不影响rem的计算 */
.parent {
font-size: 20px;
width: 10rem; /* 10 * 16px = 160px */
padding: 1rem; /* 1 * 16px = 16px */
}
/* 子元素无论嵌套多少层，rem都基于根元素计算 */
.child {
font-size: 24px;
width: 5rem; /* 5 * 16px = 80px */
margin: 0.5rem; /* 0.5 * 16px = 8px */
}
rem的响应式适配用法
实际项目中通常会结合媒体查询修改根元素的字体大小，实现整体页面的响应式适配，示例如下：
/* 基准：视口宽度375px时，根字体大小16px */
html {
font-size: 16px;
}
/* 视口宽度大于768px时，根字体大小调整为18px */
@media screen and (min-width: 768px) {
html {
font-size: 18px;
}
}
/* 视口宽度大于1200px时，根字体大小调整为20px */
@media screen and (min-width: 1200px) {
html {
font-size: 20px;
}
}
/* 所有尺寸用rem设置，根字体变化时会整体缩放 */
.container {
width: 20rem;
padding: 1rem;
}
em和rem的区别对比
二者核心差异在于计算基准不同，具体对比如下：
| 对比项 | em | rem |
|---|---|---|
| 计算基准 | 当前元素的字体大小，继承父元素字体大小 | 根元素（html）的字体大小 |
| 嵌套影响 | 嵌套层级多时计算复杂，容易出错 | 不受嵌套层级影响，计算简单统一 |
| 适配灵活性 | 适合单个组件内部的相对尺寸设置 | 适合整个页面的响应式尺寸统一适配 |
| 默认数值 | 默认1em=16px（继承根元素字体大小） | 默认1rem=16px（根元素默认字体大小） |
使用建议
如果是开发组件库或者单个独立模块，需要模块内部尺寸相对自身字体大小调整，可以优先使用em单位；如果是开发整个响应式页面，需要所有尺寸基于统一基准缩放，优先使用rem单位，也可以二者结合使用，发挥各自的优势。