前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >新 CSS Math方法:rem() 和 mod()

新 CSS Math方法:rem() 和 mod()

作者头像
前端小智@大迁世界
发布2024-02-12 08:52:34
1010
发布2024-02-12 08:52:34
举报
文章被收录于专栏:终身学习者终身学习者

免费体验 Gpt4 plus 与 AI作图神器,我们出的钱 体验地址:体验

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

rem() 函数的基础知识

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

在 JavaScript 中,我们可以使用运算符来实现这一功能: %

代码语言:javascript
复制
console.log(9 % 4); // 1
console.log(5 % 4.1); // 0.9
console.log(1003 % 5); // 3

在 CSS 中,我们现在可以使用 rem() 函数来计算余数。它接受两个参数,就像 JavaScript 中使用余数操作符 % 的两个数字一样。在数学术语中,第一个数字是被除数,第二个是除数。

下面的 CSS 表示相当于前面的 JavaScript 示例:

代码语言:javascript
复制
line-height: rem(9, 4); /* 1 */
line-height: rem(5, 4.1); /* 0.9 */
line-height: rem(1003 % 5); /* 3 */

由于我们使用的是 CSS,因此还必须考虑单位。两个参数值的类型必须相同,例如长度或角度表示法。

代码语言:javascript
复制
rotate: rem(20deg, 5deg); /* 0deg */
rotate: rem(20deg, 7deg); /* 6deg */
rotate: rem(20deg, 3deg); /* 2deg */

如果单位类型相同,则可以混合使用。例如,我们可以混合使用 degturn 这两个单位,因为它们都表示角度。

代码语言:javascript
复制
rotate: rem(100deg, .25turn); /* 10deg (100 % 90) */
rotate: rem(200deg, .25turn); /* 20deg (200 % 90) */

值总是取第一个参数(被除数)的符号。因此,如果被除数是负数,结果也将是负数。第二个参数(除数)的符号对结果没有影响。

代码语言:javascript
复制
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() 函数的基础知识

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

代码语言:javascript
复制
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() 函数则取除数的符号。

代码语言:javascript
复制
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() 函数。让我们从一个例子开始:

代码语言:javascript
复制
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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2024-02-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • rem() 函数的基础知识
  • mod() 函数的基础知识
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档