# CSS clamp() 参考

URL: https://caijiao.org/reference/css/clamp
Source: docs/reference/css/clamp.md
Description: CSS clamp() Reference，整理最小值、首选值、最大值、响应式字号、间距、容器宽度、可运行演示和常见错误。

`clamp()` 用于在最小值、首选值和最大值之间计算 CSS 值，常用于响应式字号、宽度、间距和布局尺寸。

## 语法

```css
font-size: clamp(1rem, 2vw + 0.5rem, 2rem);
```

## 参数

```text
clamp(最小值, 首选值, 最大值)
```

- 最小值：不会小于这个值。
- 首选值：浏览器优先尝试使用的动态值。
- 最大值：不会大于这个值。

## 可运行演示

[在线代码演示](/reference/css/demos/clamp-type.html)

## 常见错误

- 首选值没有动态单位，例如 `clamp(16px, 20px, 32px)` 没有响应式意义。
- 最小值大于最大值，结果不符合预期。
- 过度使用 viewport 单位，导致超宽屏文字过大；应设置合理最大值。

## 相关内容

- [CSS Reference](/reference/css/)
- [CSS clamp 教程](/css/11-advanced/03-clamp)
- [CSS 响应式单位](/css/10-responsive/01-viewport-units)
- [MDN clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)