新CSS Math方法中rem()和mod()的使用
<p>CSS 添加了许多新的数学函数来补充旧有的函数（如 <code>calc()</code> 和最近的 <code>clamp()</code> ）。这些函数最终都表示一个数值，但其工作原理的细微差别并不总是一开始就很清楚。本文介绍每个函数的常见用例以及不太常见的用例。</p><h2>rem() 函数的基础知识</h2>
<p>余数的数学概念来自除法，表示一个数不能平均除以另一个数时的余数。例如，在 <code>9 ÷ 4</code> 中， <code>9</code> 不是 <code>4</code> 的倍数，因此 <code>4</code> 不能平均分成 <code>9</code> 。你可以把两个 <code>4</code> 相加，得到 <code>8</code> ，但是你仍然有一个 <code>1</code> 余数来得到 <code>9</code> ，所以 <code>1</code> 就是我们的余数。</p>
<p>在 JavaScript 中，我们可以使用运算符来实现这一功能： <code>%</code> ：</p>
<div class="jb51code"><pre class="brush:js;">console.log(9 % 4); // 1
console.log(5 % 4.1); // 0.9
console.log(1003 % 5); // 3</pre></div>
<p>在 CSS 中，我们现在可以使用 <code>rem()</code> 函数来计算余数。它接受两个参数，就像 JavaScript 中使用余数操作符 <code>%</code> 的两个数字一样。在数学术语中，第一个数字是被除数，第二个是除数。</p>
<p>下面的 CSS 表示相当于前面的 JavaScript 示例：</p>
<div class="jb51code"><pre class="brush:css;">line-height: rem(9, 4); /* 1 */
line-height: rem(5, 4.1); /* 0.9 */
line-height: rem(1003 % 5); /* 3 */</pre></div>
<p>由于我们使用的是 CSS，因此还必须考虑单位。两个参数值的类型必须相同，例如长度或角度表示法。</p>
<div class="jb51code"><pre class="brush:css;">rotate: rem(20deg, 5deg); /* 0deg */
rotate: rem(20deg, 7deg); /* 6deg */
rotate: rem(20deg, 3deg); /* 2deg */</pre></div>
<p>如果单位类型相同，则可以混合使用。例如，我们可以混合使用 <code>deg</code> 和 <code>turn</code> 这两个单位，因为它们都表示角度。</p>
<div class="jb51code"><pre class="brush:css;">rotate: rem(100deg, .25turn); /* 10deg (100 % 90) */
rotate: rem(200deg, .25turn); /* 20deg (200 % 90) */</pre></div>
<p>值总是取第一个参数（被除数）的符号。因此，如果被除数是负数，结果也将是负数。第二个参数（除数）的符号对结果没有影响。</p>
<div class="jb51code"><pre class="brush:css;">line-height: rem(9, 4); /* 1 */
line-height: rem(-9, 4); /* -1 */
line-height: rem(9, -4); /* 1 */
line-height: rem(-9, -4); /* -1 */</pre></div>
<h2>mod() 函数的基础知识</h2>
<p>与余数概念密切相关的是模函数。当被除数和除数的符号相同时，两个函数的结果相同。</p>
<div class="jb51code"><pre class="brush:css;">line-height: rem(9, 4); /* 1 */
line-height: mod(9, 4); /* 1 */
line-height: rem(-9, -4); /* -1 */
line-height: mod(-9, -4); /* -1 */</pre></div>
<p>然而，<code>rem()</code> 函数取被除数的符号，而 <code>mod()</code> 函数则取除数的符号。</p>
<div class="jb51code"><pre class="brush:css;">line-height: mod(9, 4); /* 1 */
line-height: mod(-9, 4); /* 1 */
line-height: mod(9, -4); /* -1 */
line-height: mod(-9, -4); /* -1 */</pre></div>
<p>而最重要的是... 当你的符号混合时，你必须用不同的方式来思考 <code>mod()</code> 函数。让我们从一个例子开始：</p>
<div class="jb51code"><pre class="brush:css;">line-height: rem(-9, 4); /* 1 */
line-height: mod(-9, 4); /* -3 */
line-height: rem(9, -4); /* -1 */
line-height: mod(9, -4); /* 3 */</pre></div>
<p>当然，以下是这段话的中文翻译：</p>
<p>如果去掉符号，对于余数，我们通常会考虑除数的多少倍可以放入被除数中。在 <code>rem(9, 4)</code> 的情况下，两个 4 的倍数可以放入 9 中（因为 <code>2 * 4 = 8</code>），余数是 1（因为 <code>9 - 8 = 1</code>）。</p>
<p>对于<code>mod()</code> 函数，在一个符号为负数而另一个符号为正数的情况下，它会寻找比被除数更大的倍数。所以对于 <code>mod(9, -4)</code>，你要寻找刚刚超过被除数的倍数（4 * 3 = 12）。然后像往常一样，我们再查看差值，所以答案是 <code>12 - 9 = 3</code>。</p>
頁:
[1]