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

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

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

在 JavaScript 中，我們可以使用運(yùn)算符來(lái)實(shí)現(xiàn)這一功能： % ：

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

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

下面的 CSS 表示相當(dāng)于前面的 JavaScript 示例：

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

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

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

如果單位類型相同，則可以混合使用。例如，我們可以混合使用 deg 和 turn 這兩個(gè)單位，因?yàn)樗鼈兌急硎窘嵌取?/p>

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

值總是取第一個(gè)參數(shù)（被除數(shù)）的符號(hào)。因此，如果被除數(shù)是負(fù)數(shù)，結(jié)果也將是負(fù)數(shù)。第二個(gè)參數(shù)（除數(shù)）的符號(hào)對(duì)結(jié)果沒(méi)有影響。

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í)

與余數(shù)概念密切相關(guān)的是模函數(shù)。當(dāng)被除數(shù)和除數(shù)的符號(hào)相同時(shí)，兩個(gè)函數(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ù)的符號(hào)，而 mod() 函數(shù)則取除數(shù)的符號(hào)。

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

而最重要的是... 當(dāng)你的符號(hào)混合時(shí)，你必須用不同的方式來(lái)思考 mod() 函數(shù)。讓我們從一個(gè)例子開始：

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

當(dāng)然，以下是這段話的中文翻譯：

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

對(duì)于mod() 函數(shù)，在一個(gè)符號(hào)為負(fù)數(shù)而另一個(gè)符號(hào)為正數(shù)的情況下，它會(huì)尋找比被除數(shù)更大的倍數(shù)。所以對(duì)于 mod(9, -4)，你要尋找剛剛超過(guò)被除數(shù)的倍數(shù)（4 * 3 = 12）。然后像往常一樣，我們?cè)俨榭床钪?，所以答案?12 - 9 = 3。

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

最新評(píng)論