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() 方法。将值舍入到舍入间隔最接近于零的整数倍数。

在 Dan Wilson 的 The New CSS Math: round() 中详细了解 round()。

rem() 和 mod() 函数

rem() 和 mod() CSS 函数的工作方式与 JavaScript remainder operator (%) 类似。它们接受两个值，第一个值（被除数）除以第二个值（除数），并返回余数。

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

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

在 Dan Wilson 的 The New CSS Math: rem() and mod() 中详细了解 rem() 和 mod()。