现在,所有主流引擎都支持 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 撰写的《新 CSS 数学:round()
》。
rem()
和 mod()
函数
rem()
和 mod()
CSS 函数的工作方式与 JavaScript 余数运算符 (%) 类似。这两个函数取两个值,第一个值(被除数)除以第二个值(除数),然后返回余数。
margin: rem(18px, 5px); /* returns 3px */
这两个函数之间的区别在于,rem()
始终接受被除数的符号,因此如果第一个值是正数,则返回的值将为正数。mod()
函数接受除数的符号。
如需详细了解 rem()
和 mod()
,请参阅由 Dan Wilson 撰写的《新 CSS 数学:rem()
和 mod()
》。