vw 和 clamp()

qq_510351592025-09-06 16:17

今天看到一个新的响应式方法，记录一下

vw (Viewport Width) 是一个与视口直接关联的单位，1vw 等于视口宽度的 1%。这意味着，元素的尺寸会随着浏览器窗口的拉伸或收缩，进行实时、平滑、无级的缩放。

复制代码

.title {
  /* 字体大小永远是视口宽度的 5% */
  font-size: 5vw;
}

vw 缺陷：缺乏边界 。在超大屏幕上，5vw 的字体会变得巨大无比；在极小的手机屏幕上，它又可能小到无法阅读。

`clamp()，`动态范围约束

基本语法，clamp(最小值, 首选值, 最大值)；这样属性值设置在了一个灵活区 间，既能响应式变化，又不会过大或过小。

css 复制代码

font-size: clamp(14px, 2vw, 20px);
/* 字体最小 14px，最大 20px，在两者之间根据视口宽度自动变化。*/

button {
  padding: clamp(8px, 2vw, 16px) clamp(12px, 3vw, 24px);
}


img {
  width: clamp(200px, 50vw, 600px);
}

vw 和 clamp()

clamp()，动态范围约束

`clamp()，`动态范围约束