CSS 中的相对长度单位

前言

在CSS中，我们经常使用长度单位来确定元素的尺寸和位置。相对长度单位是一种非常常用的单位，可以根据其他元素或者视口的尺寸来计算。相对长度单位的使用可以使网页在不同设备上的显示更加灵活和自适应。

1. em

em单位是相对于元素的字体大小来计算的。如果一个元素的字体大小为16像素，那么设置其宽度为2em就相当于32像素（2*16）。em单位的值会继承父元素的字体大小，所以em单位常用于调整字体大小和元素的间距。

font-size: 16px;
width: 2em; /* 相当于32px */

2. rem

rem单位（root em单位）是相对于根元素（即html根元素）的字体大小来计算的。rem单位的值不会受到元素的字体大小的继承影响，只会受到根元素的字体大小影响。通常我们会将根元素的字体大小设置为相对于视口宽度的百分比，这样可以实现响应式布局。

html {
  font-size: 16px; /* 设置根元素字体大小为16像素 */
}

p {
  font-size: 1.5rem; /* 相当于24像素 */
}

3. vw和vh

vw和vh单位分别是视口宽度和视口高度的百分比。1vw等于视口宽度的1%，1vh等于视口高度的1%。这两个单位常用于创建响应式的尺寸和布局，可以根据视口大小来调整元素的宽度和高度。

.width {
  width: 50vw; /* 宽度等同于视口宽度的50% */
}

.height {
  height: 25vh; /* 高度等同于视口高度的25% */
}

总结

相对长度单位在CSS中起到了非常重要的作用，可以实现网页的自适应和响应式布局。em单位适用于字体相关的尺寸调整，rem单位适用于整体布局的调整，而vw和vh单位则适用于基于视口大小的布局适配。

通过灵活运用这些相对长度单位，我们能够更好地适应不同尺寸的屏幕和设备，提供更好的用户体验。