CSS 添加了許多新的數(shù)學(xué)函數(shù)來補充舊有的函數(shù)（如 calc() 和最近的 clamp() ）。這些函數(shù)最終都表示一個數(shù)值，但其工作原理的細微差別并不總是一開始就很清楚。本文介紹每個函數(shù)的常見用例以及不太常見的用例。

rem() 函數(shù)的基礎(chǔ)知識

余數(shù)的數(shù)學(xué)概念來自除法，表示一個數(shù)不能平均除以另一個數(shù)時的余數(shù)。例如，在 9 ÷ 4 中， 9 不是 4 的倍數(shù)，因此 4 不能平均分成 9 。你可以把兩個 4 相加，得到 8 ，但是你仍然有一個 1 余數(shù)來得到 9 ，所以 1 就是我們的余數(shù)。

在 JavaScript 中，我們可以使用運算符來實現(xiàn)這一功能： % ：

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

在 CSS 中，我們現(xiàn)在可以使用 rem() 函數(shù)來計算余數(shù)。它接受兩個參數(shù)，就像 JavaScript 中使用余數(shù)操作符 % 的兩個數(shù)字一樣。在數(shù)學(xué)術(shù)語中，第一個數(shù)字是被除數(shù)，第二個是除數(shù)。

下面的 CSS 表示相當于前面的 JavaScript 示例：

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

由于我們使用的是 CSS，因此還必須考慮單位。兩個參數(shù)值的類型必須相同，例如長度或角度表示法。

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

值總是取第一個參數(shù)（被除數(shù)）的符號。因此，如果被除數(shù)是負數(shù)，結(jié)果也將是負數(shù)。第二個參數(shù)（除數(shù)）的符號對結(jié)果沒有影響。

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() 函數(shù)的基礎(chǔ)知識

與余數(shù)概念密切相關(guān)的是模函數(shù)。當被除數(shù)和除數(shù)的符號相同時，兩個函數(shù)的結(jié)果相同。

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() 函數(shù)取被除數(shù)的符號，而 mod() 函數(shù)則取除數(shù)的符號。

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() 函數(shù)。讓我們從一個例子開始：

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

當然，以下是這段話的中文翻譯：

如果去掉符號，對于余數(shù)，我們通常會考慮除數(shù)的多少倍可以放入被除數(shù)中。在 rem(9, 4) 的情況下，兩個 4 的倍數(shù)可以放入 9 中（因為 2 * 4 = 8），余數(shù)是 1（因為 9 - 8 = 1）。

對于mod() 函數(shù)，在一個符號為負數(shù)而另一個符號為正數(shù)的情況下，它會尋找比被除數(shù)更大的倍數(shù)。所以對于 mod(9, -4)，你要尋找剛剛超過被除數(shù)的倍數(shù)（4 * 3 = 12）。然后像往常一樣，我們再查看差值，所以答案是 12 - 9 = 3。

到此這篇關(guān)于新CSS Math方法中rem()和mod()的使用的文章就介紹到這了,更多相關(guān)CSS rem mod內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論