CSS 数学函数

系统掌握 CSS 数学函数：calc() 的运算规则、min/max/clamp 的响应式用法、以及新引入的 abs/sign/round/mod/rem 函数。

YouTubeGoogle

CSS 数学函数

CSS 也能做数学

现代 CSS 支持丰富的数学函数，让样式声明具备了动态计算能力。这些函数让我们能够创建响应式的、基于条件的样式声明，减少对媒体查询的依赖。

面试定位：CSS 数学函数是现代 CSS 开发的重要工具。clamp() 和 min/max 的组合用法是近年来的面试热点。

calc()

基本运算

.calculated {
  width: calc(100% - 20px);
  width: calc(100vw - 40px);
  height: calc(100vh - 100px);
  margin: calc(10px + 5px);
  padding: calc(2 * 1rem);
  font-size: calc(1rem + 0.5vw);
}

运算规则

.operations {
  /* 加减乘除 */
  width: calc(100% - 40px);
  width: calc(50% + 20px);
  width: calc(100% / 4);
  width: calc(100% * 0.25);

  /* 混合单位 */
  width: calc(100vw - 2rem);
  height: calc(100vh - 60px - 2rem);

  /* 嵌套 */
  width: calc(calc(100% / 3) - 20px);
}

min()

基本用法

.min-example {
  /* 取较小值 */
  width: min(300px, 100%);
  /* 如果 100% < 300px，用 100%；否则用 300px */
}

响应式用法

.responsive {
  /* 最大宽度：不超过 300px，但能更小 */
  width: min(300px, 100%);
  /* 网格布局 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

max()

基本用法

.max-example {
  /* 取较大值 */
  width: max(200px, 50%);
  /* 如果 50% > 200px，用 50%；否则用 200px */
}

响应式用法

.responsive-minmax {
  /* 确保最小宽度 */
  padding: max(1rem, 5vw);
}

clamp()

基本用法

.clamp-example {
  /* clamp(min, preferred, max) */
  font-size: clamp(1rem, 2vw, 2rem);
  /* 最小 1rem，优先 2vw，最大 2rem */
}

.responsive-text {
  /* 响应式字体大小 */
  font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}

clamp 的实际应用

/* 1. 响应式字体 */
h1 {
  font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}

/* 2. 响应式间距 */
.section {
  padding: clamp(1rem, 5vw, 3rem);
}

/* 3. 响应式宽度（配合容器） */
.container {
  width: clamp(300px, 90vw, 1200px);
  margin: 0 auto;
}

新数学函数

abs()、sign()

.new-math {
  /* abs：绝对值 */
  width: abs(-100px); /* 100px */

  /* sign：符号（-1、0、1） */
  width: sign(-100px); /* -1 */
}

round()

.round-example {
  /* 四舍五入 */
  width: round(10.5px); /* 11px */
  width: round(10.4px); /* 10px */

  /* 指定舍入方式 */
  width: round(nearest, 10.5px); /* nearest | up | down | to-zero */
  width: round(up, 10.2px); /* 11px */
}

mod() 和 rem()

.mod-rem {
  /* mod：取模（与 % 类似，但结果可以是负数） */
  width: mod(15px, 4px); /* 3px */
  width: mod(-15px, 4px); /* 1px */

  /* rem：取余（结果总是与被除数同号） */
  width: rem(-15px, 4px); /* -3px */
}

实战：响应式系统

:root {
  /* 基础尺寸 */
  --space-unit: 1rem;

  /* 响应式间距 */
  --space-xs: max(0.25rem, 1vw);
  --space-sm: max(0.5rem, 2vw);
  --space-md: clamp(1rem, 3vw, 2rem);
  --space-lg: clamp(1.5rem, 5vw, 4rem);
}

/* 响应式字体 */
.text {
  font-size: clamp(
    var(--text-min, 1rem),
    var(--text-preferred, 2vw + 1rem),
    var(--text-max, 2rem)
  );
}

延展阅读