# `clamp()` 函数

URL: https://caijiao.org/css/11-advanced/03-clamp
Source: docs/css/11-advanced/03-clamp.md
Description: clamp() 函数允许在 CSS 中设置响应式的最小值、理想值和最大值，常用于字体或间距的自适应控制。

`clamp()` 是 CSS 提供的一个强大的函数，用于在设置样式时限定一个值的**最小值**、**理想值**和**最大值**。它是响应式设计中非常实用的工具，尤其适用于字体大小、元素尺寸、间距等。

## 1. 语法结构

```css
clamp(min, preferred, max)
```

含义如下：

- `min`：最小值
- `preferred`：理想值（通常为百分比或 `vw`）
- `max`：最大值

浏览器将根据视口宽度，在 `min` 和 `max` 之间取最接近 `preferred` 的值。

### 示例：字体大小自动调整

```css
h1 {
  font-size: clamp(20px, 4vw, 36px);
}
```

在小屏幕时最小 20px，随着视口放大最大不超过 36px。

## 2. 应用场景

- 自适应字体大小
- 自适应布局间距
- 图片或容器尺寸限制

## `clamp()` 函数示例

[在线代码演示](/css/demos/33.html)