VW(viewport width)

vw表示当前视口宽度的1%。1vw等于视口宽度的1%，100vw等

.element {
  width: 50vw; /* 元素宽度为视口宽度的50% */
  font-size: 2vw; /* 字体大小随视口宽度缩放 */
}
 

vw的适用场景

• 响应式布局：根据屏幕宽度调整元素尺寸，避免固定像素的局限性。
• 全屏元素：实现宽度或高度与视口完全匹配的效果（如全屏轮播图）。
• 字体缩放：结合calc()或媒体查询实现动态字体大小。

vw结合媒体查询

.container {
  padding: 5vw;
}
@media (max-width: 768px) {
  .container {
    padding: 3vw;
  }
}