不写媒体查询也能自适应？clamp/min/max 实战讲透

先上一段让你在媒体查询里写到手酸的“断点地狱”：

.title {
    font-size: 16px;
}

@media (min-width: 768px) {
    .title {
        font-size: 24px;
    }
}

@media (min-width: 1024px) {
    .title {
        font-size: 32px;
    }
}

三个断点，只调一个字号。宽屏要大、手机要小，中间要平滑过渡——用媒体查询硬写也行，但断点一多就失控。

CSS 的流式数学函数一次性解决：

.title {
    font-size: clamp(16px, 4vw, 32px);
    /* 最小 16px，默认 4vw，最大 32px */
}

一行代码，不用断点，不用媒体查询，字号在 16px 到 32px 之间随视口平滑变化。今天把 clamp()、min()、max() 三个函数一次讲清楚。

先搞清楚三个函数的区别

三个函数可用于支持数学函数的数值属性。实战里最常见于 font-size、width、height、padding、margin 等。 同一组参数必须是可比较的数值类型（例如可合并的长度/百分比；颜色这类非数值类型不行）。

1. min()：优先用小的，防止溢出

min() 从两个值中选较小的——适合“宽度不能超过某个值，但也要自适应”的场景。

/* ✅ 用 min：宽度取 100% 和 600px 中的较小值 */
.container {
    width: min(100%, 600px);
    margin: 0 auto;
}

/* 等价于 */
.container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

使用场景

/* 图片最大不超过容器宽度 */
.gallery img {
    width: min(100%, 400px);
}

/* 内边距自适应 */
.card {
    padding: min(4vw, 24px);
}

2. max()：优先用大的，保证最小尺寸

max() 从两个值中选较大的——适合“宽度不能小于某个值，否则内容不好看”的场景。

/* ✅ 用 max：宽度取 200px 和 30% 中的较大值 */
.sidebar {
    width: max(200px, 30%);
}

/* 等价于 */
.sidebar {
    width: 30%;
    min-width: 200px;
}

使用场景

/* 按钮最小宽度，内容少时也不会太窄 */
.button {
    min-width: max(80px, 8vw);
}

/* 输入框最小宽度 */
.input {
    width: max(160px, 30%);
}

3. clamp()：最全能，三位一体

clamp(min, preferred, max) = 取中间值，限制在 min 和 max 之间。

.title {
    font-size: clamp(16px, 4vw, 32px);
}

它干了三件事：

1. ‎计算结果 ≤ 16px → 取 16px（不会太小）
2. ‎计算结果在 16-32px 之间 → 取计算值（平滑变化）
3. ‎计算结果 ≥ 32px → 取 32px（不会太大）

使用场景

/* 1. 响应式字号（最常用） */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(0.875rem, 1.2vw, 1.125rem); }

/* 2. 卡片宽度自适应 */
.card {
    width: clamp(280px, 60%, 480px);
}

/* 3. 容器高度自适应 */
.hero {
    min-height: clamp(300px, 50vh, 600px);
}

/* 4. 间距自适应 */
.section {
    padding: clamp(16px, 4vw, 64px) clamp(16px, 2vw, 32px);
}

4. 实战场景

场景一：响应式标题 + 卡片

.hero {
    padding: clamp(32px, 8vw, 120px) clamp(16px, 4vw, 64px);
    min-height: clamp(400px, 80vh, 800px);
}

.hero h1 {
    font-size: clamp(2rem, 6vw, 4.5rem);
    margin-bottom: clamp(8px, 2vw, 24px);
}

.hero p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    max-width: clamp(400px, 70%, 700px);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30%, 320px), 1fr));
    gap: clamp(12px, 2vw, 24px);
}

场景二：两栏自适应布局

.layout {
    display: flex;
    gap: clamp(12px, 2vw, 32px);
    padding: clamp(16px, 4vw, 48px);
}

.main {
    flex: 1;
    min-width: 0;
}

.sidebar {
    width: clamp(200px, 25%, 320px);
    flex-shrink: 0;
}

5. 兼容性 & 性能

• ‎Chrome 79+、Edge 79+、Firefox 75+、Safari 13.1+
• ‎所有现代浏览器都已支持，可直接用在生产环境
• ‎常见可用于 font-size、width、padding、margin、height 等数值属性（前提是该属性支持数学函数）
• ‎百分比能否生效取决于属性规则和父元素是否有确定尺寸（尤其是 height 相关场景）

6. 可复制的 clamp 公式模板

很多人知道 clamp() 好用，但卡在“中间值怎么配”。这里给你一套可以直接抄的线性公式。

目标：在某个视口区间内，让属性值线性变化。

已知：
- 最小视口宽度：Vmin
- 最大视口宽度：Vmax
- 最小值：Smin
- 最大值：Smax

先算：
- slope = (Smax - Smin) / (Vmax - Vmin)
- intercept = Smin - slope * Vmin

最终：
clamp(Smin, calc(intercept + slope * 100vw), Smax)

例子：字号在 375px 到 1440px 之间，从 16px 平滑到 24px

/* 计算后可直接用 */
.title {
    font-size: clamp(16px, calc(13.18px + 0.75vw), 24px);
}

这套写法比“只拍脑袋填一个 4vw”更可控，尤其适合和设计稿对齐。

小结

• ‎min(a, b) → 选较小的 → 适合宽度自适应（宽度不超过某值）
• ‎max(a, b) → 选较大的 → 适合保证最小尺寸（宽度不小于某值）
• ‎clamp(min, pref, max) → 限制范围 → 最全能，适合字号、间距、尺寸
• ‎三个函数都支持常见长度单位混合计算（如 px、%、vw、vh、rem、em），但前提是这些值在该属性上可比较
• ‎配合 auto-fit / minmax，Grid 布局可完全零媒体查询

一句话：clamp() 是响应式字号的最终答案——不用写断点，字号在安全范围内平滑变化。min() 和 max() 则分别解决“不能太大”和“不能太小”的问题。三个函数加在一起，能让你的 CSS 少写 70% 的媒体查询。