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

Rachel Andrew

现在，所有主流引擎都支持 CSS 阶梯值数学函数： round(), mod(), 和 rem()。

阶梯值函数都会根据另一个值对给定值进行转换 step value。

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()，请访问 新的 CSS 数学公式：round()、 作者：Dan Wilson。

rem() 和 mod() 函数

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

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

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

如需详细了解 rem() 和 mod()，请访问 新的 CSS 数学公式：rem() 和 mod()， 作者：Dan Wilson。