CSS clamp() 函数

基本介绍

clamp() 是 CSS 中的一个函数，用于创建一个响应式的值，该值会在最小和最大值之间根据一个动态表达式进行缩放。

语法

clamp() 函数接受三个参数：

clamp(min, value, max)

• min: 最小值，当动态计算值小于这个值时，将使用此值
• value: 中间值（动态表达式），通常使用 vw、vh 等视窗单位，决定了在最小和最大值之间的缩放行为
• max: 最大值，当动态计算值大于这个值时，将使用此值

工作原理

clamp() 函数的工作原理可以理解为：

1. 首先计算中间的动态值（通常基于视窗大小）
2. 如果这个值小于最小值，则返回最小值
3. 如果这个值大于最大值，则返回最大值
4. 如果这个值在最小和最大值之间，则直接返回这个值

换句话说，clamp(min, value, max) 等价于 max(min, min(value, max))，但语法更加简洁易读。

使用示例

基本使用

/* 字体大小会根据视窗宽度变化，但限制在 16px 和 32px 之间 */
.responsive-text {
  font-size: clamp(1rem, 3vw, 2rem);
}

/* 容器宽度会根据视窗宽度变化，但限制在 300px 和 800px 之间 */
.container {
  width: clamp(300px, 80vw, 800px);
}

实际应用示例

响应式字体大小

<div class="hero-section">
  <h1 class="hero-title">响应式标题</h1>
  <p class="hero-text">这是一段响应式文字，会根据屏幕大小自动调整大小</p>
</div>

.hero-section {
  padding: 2rem;
  text-align: center;
}

.hero-title {
  /* 字体大小在 2rem 到 4rem 之间，根据视窗宽度变化 */
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: bold;
  margin-bottom: 1rem;
}

.hero-text {
  /* 字体大小在 1rem 到 1.5rem 之间，根据视窗宽度变化 */
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

响应式容器尺寸

<div class="card-container">
  <div class="card">卡片内容</div>
  <div class="card">卡片内容</div>
  <div class="card">卡片内容</div>
</div>

.card-container {
  /* 容器宽度在 300px 到 1200px 之间自适应 */
  max-width: clamp(300px, 90vw, 1200px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  padding: 1rem;
}

.card {
  padding: clamp(1rem, 3vw, 2rem);
  background-color: #f0f0f0;
  border-radius: clamp(8px, 2vw, 16px);
}

与其他响应式方法的对比

方法	优点	缺点
clamp()	简洁直观，单行代码实现响应式，无需媒体查询	浏览器兼容性要求较高
媒体查询	精确控制，兼容性更好	代码冗余，需要为不同断点编写样式
calc()	计算灵活，可以进行复杂计算	没有内置的最小/最大值限制
vw/vh	完全响应式	没有限制，在极端屏幕尺寸下可能不适用

浏览器兼容性

相关信息

• 表格中的数字表示该浏览器开始支持的最低版本
• "不支持" 表示该浏览器不支持此功能

PC 端

浏览器功能	Chrome	Edge	Firefox	Opera	Safari
clamp()	79	79	75	66	13.1

移动端

浏览器功能	Chrome Android	Firefox Android	Opera Android	Safari iOS	WebView Android
clamp()	79	79	66	13.4	79

注意事项

1. IE 浏览器：所有版本的 IE 浏览器均不支持 clamp() 函数
2. Edge 浏览器：Edge 79 及以上版本支持（基于 Chromium 的版本）
3. Safari 浏览器：iOS 13.4+ 和 macOS 10.15.4+ 开始支持
4. 降级方案：对于不支持的浏览器，可以使用 CSS 变量和回退值

降级方案

对于需要支持旧版浏览器的项目，可以使用以下降级策略：

.responsive-element {
  /* 旧版浏览器回退值 */
  font-size: 1rem;
  /* 支持 clamp() 的现代浏览器 */
  font-size: clamp(1rem, 3vw, 2rem);
}

或者使用 CSS 变量结合 calc() 实现类似效果：

:root {
  --base-font-size: 1rem;
  --viewport-unit: 3vw;
  --max-font-size: 2rem;
}

.responsive-element {
  /* 回退值 */
  font-size: var(--base-font-size);
  /* 更复杂的降级方案 */
  font-size: calc(var(--base-font-size) + (var(--viewport-unit) - 32px) * 0.1);
  /* 现代浏览器 */
  font-size: clamp(var(--base-font-size), var(--viewport-unit), var(--max-font-size));
}