CSS中自适应的单位都有哪些

2025-03-11 87 阅读3分钟

CSS中自适应的单位都有哪些

在 CSS 中，自适应单位用于创建响应式布局，使元素能够根据屏幕尺寸、容器尺寸或其他因素动态调整大小。以下是常见的自适应单位及其用途：

百分比 (%)

作用：相对于父元素的尺寸。
用途：常用于宽度、高度、边距、内边距等。

示例：

.container {
    width: 80%; /* 父元素宽度的 80% */
}

视口宽度 (vw)

作用：相对于视口宽度的 1%。
用途：适合根据屏幕宽度调整元素尺寸。

示例：

.header {
    width: 100vw; /* 视口宽度的 100% */
}

视口高度 (vh)

作用：相对于视口高度的 1%。
用途：适合根据屏幕高度调整元素尺寸。

示例：

.hero-section {
    height: 50vh; /* 视口高度的 50% */
}

视口最小值 (vmin)

作用：相对于视口宽度和高度中较小值的 1%。
用途：适合在屏幕尺寸变化时保持元素比例。

示例：

.box {
    width: 50vmin; /* 视口较小尺寸的 50% */
}

视口最大值 (vmax)

作用：相对于视口宽度和高度中较大值的 1%。
用途：适合在屏幕尺寸变化时保持元素比例。

示例：

.box {
    height: 50vmax; /* 视口较大尺寸的 50% */
}

相对字体大小 (em)

作用：相对于当前元素的字体大小。
用途：适合用于字体大小、边距、内边距等。

示例：

.text {
    font-size: 2em; /* 当前字体大小的 2 倍 */
}

根元素字体大小 (rem)

作用：相对于根元素（<html>）的字体大小。
用途：适合用于全局尺寸控制。

示例：

.title {
    font-size: 1.5rem; /* 根元素字体大小的 1.5 倍 */
}

相对于父元素字体大小 (ch)

作用：相对于当前元素的 0 字符宽度。
用途：适合用于文本布局。

示例：

.text {
    width: 20ch; /* 20 个字符的宽度 */
}

相对于根元素字体大小 (lh)

作用：相对于当前元素的行高。
用途：适合用于文本布局。

示例：

.text {
    margin-bottom: 1lh; /* 1 倍行高 */
}

相对于根元素字体大小 (rlh)

作用：相对于根元素的行高。
用途：适合用于全局文本布局。

示例：

.text {
    margin-bottom: 1rlh; /* 根元素行高的 1 倍 */
}

相对单位 (fr)

作用：CSS Grid 布局中的分数单位，用于分配剩余空间。
用途：适合用于网格布局。

示例：

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 第一列占 1 份，第二列占 2 份 */
}

相对单位 (min-content, max-content, fit-content)

作用：
- min-content：元素的最小内容宽度。
- max-content：元素的最大内容宽度。
- fit-content：根据内容调整宽度，但不超过可用空间。
用途：适合用于动态调整元素尺寸。

示例：

.box {
    width: fit-content; /* 根据内容调整宽度 */
}

总结

单位	描述	适用场景
`%`	相对于父元素尺寸	宽度、高度、边距等
`vw`	相对于视口宽度	响应式宽度
`vh`	相对于视口高度	响应式高度
`vmin`	相对于视口较小尺寸	保持比例
`vmax`	相对于视口较大尺寸	保持比例
`em`	相对于当前元素字体大小	字体大小、边距等
`rem`	相对于根元素字体大小	全局尺寸控制
`ch`	相对于字符宽度	文本布局
`lh`	相对于当前元素行高	文本布局
`rlh`	相对于根元素行高	全局文本布局
`fr`	CSS Grid 中的分数单位	网格布局
`min-content`	元素的最小内容宽度	动态调整尺寸
`max-content`	元素的最大内容宽度	动态调整尺寸
`fit-content`	根据内容调整宽度，不超过可用空间	动态调整尺寸

根据具体需求选择合适的单位，可以更灵活地实现自适应布局。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github