新 CSS Math方法：rem() 和 mod()-六虎

免费体会 Gpt4 plus 与 AI作图神器，我们出的钱体会地址：体会

CSS 添加了许多新的数学函数来弥补旧有的函数（如 calc() 和最近的 clamp() ）。这些函数终究都标明一个数值，但其作业原理的细微差别并不总是一开端就很清楚。本文介绍每个函数的常见用例以及不太常见的用例。

rem() 函数的基础知识

余数的数学概念来自除法，标明一个数不能均匀除以另一个数时的余数。例如，在 9 4 中， 9 不是 4 的倍数，因此 4 不能均匀分成 9 。你可以把两个 4 相加，得到 8 ，但是你依然有一个 1 余数来得到 9 ，所以 1 就是我们的余数。

在 JavaScript 中，我们可以运用运算符来完成这一功用： % ：

console.log(9 % 4); // 1
console.log(5 % 4.1); // 0.9
console.log(1003 % 5); // 3

在 CSS 中，我们现在可以运用 rem() 函数来核算余数。它承受两个参数，就像 JavaScript 中运用余数操作符 % 的两个数字相同。在数学术语中，第一个数字是被除数，第二个是除数。

下面的 CSS 标明相当于前面的 JavaScript 示例：

line-height: rem(9, 4); /* 1 */
line-height: rem(5, 4.1); /* 0.9 */
line-height: rem(1003 % 5); /* 3 */

由于我们运用的是 CSS，因此还有必要考虑单位。两个参数值的类型有必要相同，例如长度或视点标明法。

rotate: rem(20deg, 5deg); /* 0deg */
rotate: rem(20deg, 7deg); /* 6deg */
rotate: rem(20deg, 3deg); /* 2deg */

假设单位类型相同，则可以混合运用。例如，我们可以混合运用 deg 和 turn 这两个单位，由于它们都标明视点。

rotate: rem(100deg, .25turn); /* 10deg (100 % 90) */
rotate: rem(200deg, .25turn); /* 20deg (200 % 90) */

值总是取第一个参数（被除数）的符号。因此，假设被除数是负数，成果也将是负数。第二个参数（除数）的符号对成果没有影响。

line-height: rem(9, 4); /* 1 */
line-height: rem(-9, 4); /* -1 */
line-height: rem(9, -4); /* 1 */
line-height: rem(-9, -4); /* -1 */

与余数概念密切相关的是模函数。当被除数和除数的符号相一同，两个函数的成果相同。

line-height: rem(9, 4); /* 1 */
line-height: mod(9, 4); /* 1 */
line-height: rem(-9, -4); /* -1 */
line-height: mod(-9, -4); /* -1 */

但是，rem() 函数取被除数的符号，而 mod() 函数则取除数的符号。

line-height: mod(9, 4); /* 1 */
line-height: mod(-9, 4); /* 1 */
line-height: mod(9, -4); /* -1 */
line-height: mod(-9, -4); /* -1 */

而最重要的是… 当你的符号混合时，你有必要用不同的方式来考虑 mod() 函数。让我们从一个比如开端：

line-height: rem(-9, 4); /* 1 */
line-height: mod(-9, 4); /* -3 */
line-height: rem(9, -4); /* -1 */
line-height: mod(9, -4); /* 3 */

当然，以下是这段话的中文翻译：

假设去掉符号，关于余数，我们通常会考虑除数的多少倍可以放入被除数中。在 rem(9, 4) 的情况下，两个 4 的倍数可以放入 9 中（由于 2 * 4 = 8），余数是 1（由于 9 - 8 = 1）。

关于mod() 函数，在一个符号为负数而另一个符号为正数的情况下，它会寻觅比被除数更大的倍数。所以关于 mod(9, -4)，你要寻觅刚刚超越被除数的倍数（4 * 3 = 12）。然后像平常相同，我们再查看差值，所以答案是 12 - 9 = 3。

首发于大众号大迁国际，欢迎注重。每周一篇实用的前端文章 ️ 同享值得注重的开发工具 ❓ 有疑问？我来回答

本文 GitHub github.com/qq449245884… 已录入，有一线大厂面试无缺考点、资料以及我的系列文章。