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

发布时间: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()