当前位置：首页 > 科技 > 软件

新 CSS Math方法：Rem() 和 Mod()

来源：责编：时间：2023-11-22 09:14:01 226观看

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

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

rem() 函数的基础知识

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

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

console.log(9 % 4); // 1console.log(5 % 4.1); // 0.9console.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。

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-33351-0.html新 CSS Math方法：Rem() 和 Mod()

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Qt 全球峰会 2023 中国站：优化整体产品开发流程，为企业提供更多选择

下一篇：打造定制线程池：Java多线程的艺术

标签：

热门焦点

CSS单标签实现转转logo

转转品牌升级后更新了全新的Logo，今天我们用纯CSS来实现转转的新Logo，为了有一定的挑战性，这里我们只使用一个标签实现，将最大化的使用CSS能力完成Logo的绘制与动画效果。新logo
如何正确使用:Has和:Nth-Last-Child

我们可以用CSS检查，以了解一组元素的数量是否小于或等于一个数字。例如，一个拥有三个或更多子项的grid。你可能会想，为什么需要这样做呢？在某些情况下，一个组件或一个布局可能会
在线图片编辑器，支持PSD解析、AI抠图等

自从我上次分享一个人开发仿造稿定设计的图片编辑器到现在，不知不觉已过去一年时间了，期间我经历了裁员失业、面试找工作碰壁，寒冬下一直没有很好地履行计划.....这些就放在日
腾讯VS网易，最卷游戏暑期档，谁能笑到最后？

作者：无锈钵来源：财经无忌7月16日晚，上海1862时尚艺术中心。伴随着幻象的精准命中，硕大的荧幕之上，比分被定格在了14：12，被寄予厚望的EDG战队以绝对的优势战胜了BLG战队，拿下了总决
“又被陈思诚骗了”

作者｜张思齐出品｜众面（ID：ZhongMian_ZM）如今的国产悬疑电影，成了陈思诚的天下。最近大爆电影《消失的她》票房突破30亿断层夺魁暑期档，陈思诚再度风头无两。你可以说陈思诚的
年轻人的“职场羞耻感”，无处不在

作者：冯晓亭陶淘李欣张琳马舒叶来源：燃次元“人在职场，应该选择什么样的着装？”近日，在网络上，一个与着装相关的帖子引发关注，在该帖子里，一位在高级写字楼亚洲金
Android 14发布：首批适配机型公布

5月11日消息，谷歌在今天凌晨举行了I/O大会，本次发布会谷歌带来了自家的AI语言模型PaLM 2、谷歌Pixel Fold折叠屏、谷歌Pixel 7a手机，同时发布了Androi
Windows 11发布，微软一改往常对老机型开放的态度

距离 Windows 11 发布已经过去一周，在过去一周里，很多数码爱好者围绕其对 Android 应用的支持、对老机型的升级问题展开了激烈讨论。与以往不同的是，在这次大
2021中国国际消费电子博览会与青岛国际软件融合创新博览会新闻发布会隆重举行

9月18日，2021中国国际消费电子博览会与青岛国际软件融合创新博览会新闻发布会在青岛国际新闻中心隆重举行。发布会上青岛市政府领导联袂出席，对本次双展会情