在CSS中，vh、vw、em 和 rem 是常用的相对单位，用于定义元素的尺寸。以下是它们的作用、使用方法及区别：
1. vh 和 vw
-
vh (Viewport Height): 1vh 等于视口高度的 1%。
-
vw (Viewport Width): 1vw 等于视口宽度的 1%。
使用场景:
-
用于创建响应式布局，使元素尺寸随视口大小变化。
-
常用于全屏布局或需要根据视口大小调整的元素。
示例:
.container {width: 50vw; /* 宽度为视口宽度的50% */height: 100vh; /* 高度为视口高度的100% */
}2. em 和 rem
-
em: 相对于当前元素的字体大小。如果当前元素没有设置字体大小，则继承父元素的字体大小。
-
rem (Root em): 相对于根元素（
<html>）的字体大小。
使用场景:
-
em用于需要相对于当前元素字体大小调整的样式。 -
rem用于需要相对于根元素字体大小调整的样式，适合全局一致的尺寸控制。
示例:
html {font-size: 16px; /* 设置根元素字体大小 */
}.container {font-size: 1.5em; /* 当前元素字体大小为父元素字体大小的1.5倍 */padding: 2rem; /* 内边距为根元素字体大小的2倍 */
}3. 区别
-
vh和vw: 基于视口尺寸，适合响应式布局。 -
em: 基于当前元素的字体大小，适合局部调整。 -
rem: 基于根元素的字体大小，适合全局一致的尺寸控制。
总结
-
使用
vh和vw创建响应式布局。 -
使用
em进行局部尺寸调整。 -
使用
rem实现全局一致的尺寸控制。
根据具体需求选择合适的单位，能有效提升布局的灵活性和一致性。