相对长度单位介绍
在CSS中，有绝对长度单位和相对长度单位。其中，绝对长度单位如px、in、cm等，具有固定的尺寸，而相对长度单位则根据特定的参考点进行计算，具备一定的灵活性。本文将重点介绍CSS中的相对长度单位。
1. em
em是相对于当前元素的字体大小设置的长度单位。如果我们将某个元素的字体大小设置为16px，那么1em就等于16px。如果我们将一个子元素的字体大小设置为2em，那么它将会比父元素字体大小更大，相当于32px。
例如，下面的样式设置了一个元素的字体大小为16px，另一个元素的字体大小为2em：
div {
font-size: 16px;
}
p {
font-size: 2em;
}
em适合用于调整嵌套元素的大小，可以方便地达到相对于父元素字体大小的效果。
2. rem
rem是相对于根元素（即html元素）的字体大小设置的长度单位。和em类似，如果根元素的字体大小为16px，那么1rem就是16px。
和em不同，rem不会受到嵌套元素字体大小的影响，只会根据根元素设置的字体大小进行计算。
例如，下面的样式设置了根元素的字体大小为16px，p元素的字体大小为2rem：
html {
font-size: 16px;
}
p {
font-size: 2rem;
}
rem适合用于调整整个页面的大小，可以方便地实现响应式布局。
3. vh和vw
vh和vw是相对于视口宽度和高度的长度单位。1vh等于视口高度的1%，1vw等于视口宽度的1%。
例如，下面的样式设置了一个元素的高度为50vh，宽度为50vw：
div {
height: 50vh;
width: 50vw;
}
vh和vw可以用于实现响应式设计，特别是在调整移动设备的可视区域大小时。
4. %
除了以上三种常用的相对长度单位，CSS还支持使用百分比作为长度单位。百分比是相对于父元素的大小来计算的。
例如，下面的样式设置了一个元素宽度为50%：
div {
width: 50%;
}
%适合用于实现简单的响应式设计和排版调整。
总结
CSS中的相对长度单位提供了灵活的尺寸设置方式，能够方便地实现响应式设计和排版调整。em适合用于调整嵌套元素的大小，rem适合用于调整整个页面的大小，vh和vw适合用于实现响应式设计，%适合用于实现简单的响应式设计和排版调整。在使用相对长度单位时，需要注意参照点的设置，以及保证代码可读性和可维护性。