跳至主要內容

数学和计算函数

Kpsmart2025年3月4日大约 4 分钟

数学和计算函数

CSS 数学和计算函数用于执行数学计算，可以动态计算长度、数字、角度、频率等值，使布局更加灵活和响应式。

函数列表

下面是数学和计算函数的完整列表，点击函数名可跳转到 MDN 文档查看详细信息。

函数名描述语法
calc()执行基本数学运算calc(表达式)
min()从一组值中选择最小值min(值1, 值2, ...)
max()从一组值中选择最大值max(值1, 值2, ...)
clamp()将值限制在最小值和最大值之间clamp(最小值, 首选值, 最大值)
round()将值舍入到最接近的步进值round(值, 步进值)
mod()计算模运算的结果mod(值, 除数)
rem()计算除法的余数rem(值, 除数)
abs()计算绝对值abs(值)
sign()返回数字的符号sign(值)
sin()计算正弦值sin(角度)
cos()计算余弦值cos(角度)
tan()计算正切值tan(角度)
asin()计算反正弦值asin(值)
acos()计算反余弦值acos(值)
atan()计算反正切值atan(值)
atan2()计算两个值的反正切值atan2(y, x)
pow()计算幂pow(基数, 指数)
sqrt()计算平方根sqrt(值)
hypot()计算参数平方和的平方根hypot(值1, 值2, ...)
log()计算对数log(值, 基数)
exp()计算 e 的幂exp(值)

使用示例

/* calc() 示例 - 基本计算 */
.container {
  width: calc(100% - 40px);
  margin: calc(20px + 1em) auto;
  padding: calc(1rem + 5px);
}

/* min() 和 max() 示例 - 响应式设计 */
.responsive-width {
  width: min(90%, 600px);
  font-size: max(1rem, 2vw);
}

/* clamp() 示例 - 流体排版 */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: clamp(1.2, 1.2 + 0.2 * (100vw - 320px) / (1280 - 320), 1.4);
}

/* 数学函数组合使用 */
.complex-calculation {
  --base: 100px;
  width: calc(var(--base) * 2);
  height: calc(var(--base) * 1.5);
  padding: max(10px, 1vw);
  border-radius: min(20px, 10%);
}

/* 三角函数应用 - 创建圆形路径动画 */
@keyframes circle-path {
  0% {
    transform: translate(calc(cos(0deg) * 100px), calc(sin(0deg) * 100px));
  }
  25% {
    transform: translate(calc(cos(90deg) * 100px), calc(sin(90deg) * 100px));
  }
  50% {
    transform: translate(calc(cos(180deg) * 100px), calc(sin(180deg) * 100px));
  }
  75% {
    transform: translate(calc(cos(270deg) * 100px), calc(sin(270deg) * 100px));
  }
  100% {
    transform: translate(calc(cos(360deg) * 100px), calc(sin(360deg) * 100px));
  }
}

常见应用场景

响应式布局

.container {
  /* 响应式宽度，最小 320px，最大 1200px */
  width: clamp(320px, 80vw, 1200px);
  
  /* 动态边距，确保在小屏幕上不会太小 */
  padding: max(16px, 3vw);
  
  /* 两列布局，确保列宽不小于 200px */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

流体排版

:root {
  /* 定义最小和最大字体大小 */
  --min-font: 16px;
  --max-font: 24px;
  
  /* 定义视口断点 */
  --min-viewport: 320px;
  --max-viewport: 1200px;
}

body {
  /* 字体大小随视口宽度平滑缩放 */
  font-size: clamp(
    var(--min-font),
    var(--min-font) + (var(--max-font) - var(--min-font)) * 
    ((100vw - var(--min-viewport)) / (var(--max-viewport) - var(--min-viewport))),
    var(--max-font)
  );
}

混合单位计算

.mixed-units {
  /* 混合百分比和固定单位 */
  width: calc(100% - 2rem);
  
  /* 混合视口单位和固定单位 */
  margin: calc(1vh + 10px);
  
  /* 使用变量进行计算 */
  --spacing: 8px;
  padding: calc(var(--spacing) * 2) var(--spacing);
}

浏览器兼容性

函数ChromeFirefoxSafariEdge
calc()26+16+7+12+
min()/max()79+75+11.1+79+
clamp()79+75+13.1+79+
round()116+116+16.4+116+
mod()/rem()116+116+16.4+116+
abs()/sign()116+116+16.4+116+
三角函数 (sin, cos, tan)111+113+16.4+111+
反三角函数 (asin, acos, atan)111+113+16.4+111+
pow()/sqrt()111+113+16.4+111+
hypot()/log()/exp()111+113+16.4+111+

注意事项

  1. 计算顺序：CSS 计算遵循标准数学运算顺序（括号、乘除、加减）。
  2. 单位兼容性：在 calc() 中，只能对兼容的单位进行运算（如长度单位与长度单位）。
  3. 空格要求：在 calc() 中，运算符两侧必须有空格（如 calc(100% - 20px)，而不是 calc(100%-20px)）。
  4. 嵌套函数：可以在 calc() 内部嵌套其他数学函数，如 calc(max(10px, 1vw) * 2)。
  5. 变量使用：可以在计算函数中使用 CSS 变量，如 calc(var(--base) * 2)。

相关资源