CSS 中的相对单位有哪些

在 CSS 中，相对单位是一种非常重要的长度单位类型，它们能够让网页在不同的设备和屏幕尺寸下保持良好的布局和视觉效果。下面我们就来详细了解一下 CSS 中的相对单位都有哪些。

em 单位

em 是相对于父元素字体大小的单位。例如，如果父元素的字体大小是 16px，那么 1em 就等于 16px。当使用 em 单位设置元素的尺寸时，它会根据父元素的字体大小动态调整。这在响应式设计中非常有用，比如通过修改根元素（html）的字体大小，就可以轻松地按比例调整整个页面的布局。

rem 单位

rem 是相对于根元素（html 元素）字体大小的单位。与 em 不同，rem 不受父元素字体大小的层层嵌套影响，只与根元素字体大小相关。这使得页面布局更加易于控制和统一，尤其适用于全局样式的设置。只要修改根元素的字体大小，所有使用 rem 单位的元素尺寸都会相应改变。

vw 和 vh 单位

vw 是视口宽度（viewport width）的百分比单位，1vw 等于视口宽度的 1%；vh 则是视口高度（viewport height）的百分比单位，1vh 等于视口高度的 1%。视口是浏览器窗口中用于显示网页的区域。使用 vw 和 vh 单位可以创建与视口大小紧密相关的布局，比如创建一个始终充满视口宽度或高度的元素。

vmin 和 vmax 单位

vmin 表示视口宽度和高度中的较小值的百分比，vmax 则表示视口宽度和高度中的较大值的百分比。这两个单位结合了 vw 和 vh 的特点，能根据视口的实际情况灵活调整元素大小，为复杂的响应式布局提供了更多的可能性。

%（百分比）单位

百分比单位是相对于父元素的某个属性值而言的。例如，宽度设置为 50%，就是相对于父元素宽度的 50%。它可以应用于各种属性，如宽度、高度、边距、内边距等，在实现自适应布局方面发挥着重要作用。

这些相对单位各有特点，在 CSS 设计中合理运用它们，能够打造出更加灵活、自适应的网页布局，满足不同用户设备和浏览场景的需求。