发布时间: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
:等同于 JavaScriptMath.ceil()
方法。将值向上舍入到最接近的舍入间隔整数倍。down
:等同于 JavaScriptMath.floor()
方法。将值向下舍入到最接近的舍入间隔的整数倍。nearest
(默认):等同于 JavaScriptMath.round()
。将值向上或向下舍入到最接近的舍入间隔整数倍。to-zero
:等同于 JavaScriptMath.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()
。