css vw

作者：翔龙天下发布日期:2026-04-23 浏览:119

/* 使用 vw 单位设置元素宽度和字体大小 */

/* 1vw 等于视口宽度的 1% */
.container {
  width: 80vw; /* 容器宽度为视口宽度的 80% */
  margin: 0 auto;
}

.text {
  font-size: 4vw; /* 字体大小为视口宽度的 4% */
  text-align: center;
}

解释说明：

vw 是视口宽度（viewport width）的缩写，1vw 等于视口宽度的 1%。
在上面的示例中，.container 的宽度被设置为视口宽度的 80%，这意味着当浏览器窗口变大或变小时，容器的宽度也会相应地调整。
.text 的字体大小被设置为视口宽度的 4%，因此文本的大小会根据视口宽度的变化而变化，确保在不同设备上都能有良好的显示效果。

上一篇：css样式表

下一篇：css 图片居中