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 */

mod() 函數的基礎知識

與余數概念密切相關的是模函數。當被除數和除數的符號相同時，兩個函數的結果相同。

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。