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

Rachel Andrew

现在，所有主流引擎都支持 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 撰写的《新 CSS 数学：round()》。

rem() 和 mod() 函数

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

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

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

如需详细了解 rem() 和 mod()，请参阅由 Dan Wilson 撰写的《新 CSS 数学：rem() 和 mod()》。