CSS 阶梯值数学函数现已纳入 Baseline 2024

Rachel Andrew

发布时间：2024 年 5 月 14 日

现在，所有主要引擎都支持 CSS 等距值数学函数：round()、mod() 和 rem()。

分级值函数都会根据另一个步长值转换给定值。

round() 函数

round() 函数接受要舍入的值、舍入间隔和可选的舍入策略。系统会根据舍入策略将值舍入到最接近的舍入间隔整数倍。

要舍入的值或舍入间隔都应为 CSS 自定义属性。虽然可以对这两个值进行硬编码，但如果您可以自行计算值，则没有必要对数字进行舍入。

以下 CSS 会将 --my-font-size 的值舍入到 1rem 的间隔。

font-size: round(var(--my-font-size), 1rem);

默认舍入策略为 nearest。包含舍入策略的上一个示例如下所示：

font-size: round(nearest,var(--my-font-size), 1rem);

舍入策略的可能值如下：

  • up：等同于 JavaScript Math.ceil() 方法。将值向上舍入到最接近的舍入间隔整数倍。
  • down：等同于 JavaScript Math.floor() 方法。将值向下舍入到最接近的舍入间隔的整数倍。
  • nearest（默认）：等同于 JavaScript Math.round()。将值向上或向下舍入到最接近的舍入间隔整数倍。
  • to-zero：等同于 JavaScript Math.trunc() 方法。将值舍入到最接近零的舍入间隔整数倍。

如需详细了解 round()，请参阅 Dan Wilson 撰写的 The New CSS Math: round()。

rem() 和 mod() 函数

rem() 和 mod() CSS 函数的运作方式与 JavaScript 余数运算符 (%) 类似。它们接受两个值，第一个值（被除数）被第二个值（除数）除，然后返回余数。

margin: rem(18px, 5px); /* returns 3px */

这两个函数之间的区别在于，rem() 始终采用被除数的符号，因此，如果第一个值为正，则返回值也为正。mod() 函数采用除数的符号。

如需详细了解 rem() 和 mod()，请参阅 Dan Wilson 撰写的 The New CSS Math: rem() and mod()。