css中什么是相对长度单位，相对长度单位有哪些常见类型

css中的相对长度单位是指长度值不是固定的绝对值，而是相对于某个参考基准来计算最终尺寸的单位，这类单位在响应式布局开发中应用十分广泛，能够根据参考基准的变化自动调整元素尺寸，适配不同的显示场景。

相对长度单位的核心特点

相对长度单位和绝对长度单位最大的区别在于参考基准不同，绝对长度单位比如px是固定的像素值，不会随环境变化而改变，而相对长度单位的实际渲染尺寸完全依赖于参考基准的数值，常见的参考基准包括父元素的字体大小、根元素的字体大小、视口的尺寸等。这种特性让相对长度单位非常适合用来做响应式适配，不需要针对不同屏幕尺寸写多套固定的尺寸代码。

常见的css相对长度单位

1. em单位

em是相对当前元素的字体大小来计算的单位，如果当前元素没有设置字体大小，会继承父元素的字体大小作为参考基准。比如当前元素的字体大小是16px，那么1em就等于16px，2em就等于32px。

/* 父元素字体大小为16px */
.parent {
    font-size: 16px;
}
/* 子元素没有设置字体大小，继承父元素的16px，1em=16px */
.child {
    width: 10em; /* 实际宽度为160px */
    height: 5em; /* 实际高度为80px */
    font-size: 1.2em; /* 实际字体大小为19.2px */
}

需要注意的是，如果元素自身设置了font-size为em单位，那么参考基准是父元素的字体大小，而如果元素的宽高、边距等属性使用em单位，参考基准是该元素自身的字体大小，这一点很容易混淆。

2. rem单位

rem是相对于根元素（也就是html元素）的字体大小来计算的单位，和em不同，它的参考基准是全局统一的，不会受到父元素字体大小的影响，使用起来更加可控。

/* 根元素字体大小设置为16px */
html {
    font-size: 16px;
}
/* 无论父元素字体大小是多少，1rem始终等于16px */
.box {
    width: 10rem; /* 实际宽度为160px */
    padding: 1rem; /* 实际内边距为16px */
}
/* 修改根元素字体大小后，所有rem单位的数值会同步变化 */
@media screen and (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

很多响应式布局方案都会通过动态修改根元素的字体大小，配合rem单位来实现不同屏幕尺寸下的元素尺寸自适应，开发时只需要按照设计稿的尺寸换算成rem值即可。

3. 视口相对单位

视口相对单位是相对于浏览器视口尺寸来计算的单位，常见的包括vw、vh、vmin、vmax四种：

• vw：相对于视口宽度的1%，视口宽度为100vw
• vh：相对于视口高度的1%，视口高度为100vh
• vmin：取视口宽度和高度中较小值的1%
• vmax：取视口宽度和高度中较大值的1%

/* 元素宽度占满整个视口宽度 */
.full-width {
    width: 100vw;
}
/* 元素高度占满整个视口高度 */
.full-height {
    height: 100vh;
}
/* 字体大小随视口宽度变化，视口宽度1000px时，字体大小为30px */
.text {
    font-size: 3vw;
}

这类单位适合用来设置全屏元素、随视口变化的字体尺寸等场景，不需要依赖元素的字体大小作为参考。

4. 其他相对单位

除了上述常见的单位，还有ex和ch两个相对单位，ex相对于当前字体的x高度，ch相对于当前字体的字符0的宽度，这两个单位的使用场景相对少一些，一般在处理文字排版时可能会用到。

相对长度单位的选择建议

开发时可以根据场景选择合适的相对长度单位：如果是需要跟随根元素字体大小变化的全局尺寸，优先选择rem；如果是组件内部的尺寸，跟随自身字体大小变化，可选择em；如果需要跟随视口尺寸变化，选择视口单位；固定不变的细节尺寸可以使用px。

css相对长度单位emremvw修改时间：2026-06-28 07:51:38