CSS calc/min/max/clamp

学习 calc()/min()/max()/clamp() 数学函数 · 难度：高级 · +15XP

CSS 数学函数 calc/min/max/clamp

CSS 内置的数学函数极大地增强了样式的动态计算能力，使得响应式设计无需依赖 JavaScript 或媒体查询。掌握 calc()、min()、max() 和 clamp() 是现代 CSS 开发的必备技能。

calc() — 数学计算

calc() 可以在 CSS 中进行加减乘除运算，支持不同单位混合运算：

/* 不同单位混合运算 */
.element {
  width: calc(100% - 40px);
  /* 宽度 = 父元素宽度 - 40px */
  height: calc(100vh - 80px);
  /* 高度 = 视口高度 - 80px（扣除页头页脚） */
  padding: calc(1rem + 10px);
  /* rem 和 px 混合计算 */
  margin-left: calc((100% - 1200px) / 2);
  /* 居中对齐计算 */
}

calc() 运算符规则

加法和减法：运算符前后必须有空格 — calc(100%-20px) 无效，calc(100% - 20px) 有效
乘法和除法：乘数或除数必须是数字（无单位）— calc(100% * 2) 有效，calc(100% * 2px) 无效
除法除数不能为 0

min() — 取最小值

选择逗号分隔列表中的最小值作为最终值：

/* 响应式容器 — 大屏幕最大 1000px，小屏幕自动缩小 */
.container {
  width: min(100% - 40px, 1000px);
  /* 选择较小的那个值 */
}
/* 动态字号 — 不超过 24px */
.title {
  font-size: min(5vw, 24px);
}

max() — 取最大值

选择逗号分隔列表中的最大值作为最终值：

/* 最小可读字号 — 不低于 14px */
.text {
  font-size: max(2.5vw, 14px);
}
/* 保证最小点击区域 */
button {
  width: max(100px, 20%);
  height: max(44px, 8vh);
}

clamp() — 区间限制

clamp() 接受三个参数：最小值、首选值、最大值。结果会被夹在最小值和最大值之间。

clamp(最小值, 首选值, 最大值)
/* 最终值 = min(max(最小值, 首选值), 最大值) */

/* 流体排版 — 最经典的 clamp 应用 */
body {
  font-size: clamp(16px, 1rem + 0.5vw, 22px);
  /* 最小 16px，最大 22px，中间根据视口宽度变化 */
}
/* 响应式容器 */
.card {
  width: clamp(300px, 50%, 600px);
  /* 最小 300px，最大 600px，首选 50% */
}
/* 响应式边距 */
section {
  padding: clamp(20px, 5vw, 80px);
}

实用场景

场景	代码
全屏减去固定高度	`min-height: calc(100vh - 60px)`
流体字体大小	`font-size: clamp(1rem, 0.5rem + 2vw, 2rem)`
响应式容器最大/最小宽	`width: clamp(320px, 80%, 1200px)`
三等分（含间距）	`width: calc((100% - 40px) / 3)`
侧边栏布局	`width: clamp(250px, 25vw, 350px)`

嵌套使用

这些函数可以嵌套组合使用：

/* 嵌套组合 */
.responsive-text {
  font-size: clamp(
    14px,
    calc(1rem + 1vw),
    24px
  );
}
.sidebar {
  width: clamp(
    200px,
    min(30vw, 350px),
    400px
  );
}

浏览器兼容性与回退

/* 为不支持的浏览器提供回退 */
.element {
  width: 80%;                    /* 回退 */
  width: clamp(300px, 80%, 800px);  /* 现代浏览器 */
}

CSS 数学函数让样式表具备了"思考能力"，是实现真正响应式设计的关键工具。优先使用 clamp() 处理流体尺寸，它是现代 CSS 的最佳实践之一。