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

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

来源: 责编: 时间:2023-11-22 09:14:01 257观看
导读CSS 添加了许多新的数学函数来补充旧有的函数(如 calc() 和最近的 clamp() )。这些函数最终都表示一个数值,但其工作原理的细微差别并不总是一开始就很清楚。本文介绍每个函数的常见用例以及不太常见的用例。rem() 函数

ZAc28资讯网——每日最新资讯28at.com

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

rem() 函数的基础知识

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

在 JavaScript 中,我们可以使用运算符来实现这一功能: % :ZAc28资讯网——每日最新资讯28at.com

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

在 CSS 中,我们现在可以使用 rem() 函数来计算余数。它接受两个参数,就像 JavaScript 中使用余数操作符 % 的两个数字一样。在数学术语中,第一个数字是被除数,第二个是除数。ZAc28资讯网——每日最新资讯28at.com

下面的 CSS 表示相当于前面的 JavaScript 示例:ZAc28资讯网——每日最新资讯28at.com

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

由于我们使用的是 CSS,因此还必须考虑单位。两个参数值的类型必须相同,例如长度或角度表示法。ZAc28资讯网——每日最新资讯28at.com

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

如果单位类型相同,则可以混合使用。例如,我们可以混合使用 deg 和 turn 这两个单位,因为它们都表示角度。ZAc28资讯网——每日最新资讯28at.com

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

值总是取第一个参数(被除数)的符号。因此,如果被除数是负数,结果也将是负数。第二个参数(除数)的符号对结果没有影响。ZAc28资讯网——每日最新资讯28at.com

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() 函数的基础知识

与余数概念密切相关的是模函数。当被除数和除数的符号相同时,两个函数的结果相同。ZAc28资讯网——每日最新资讯28at.com

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() 函数则取除数的符号。ZAc28资讯网——每日最新资讯28at.com

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() 函数。让我们从一个例子开始:ZAc28资讯网——每日最新资讯28at.com

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

当然,以下是这段话的中文翻译:ZAc28资讯网——每日最新资讯28at.com

如果去掉符号,对于余数,我们通常会考虑除数的多少倍可以放入被除数中。在 rem(9, 4) 的情况下,两个 4 的倍数可以放入 9 中(因为 2 * 4 = 8),余数是 1(因为 9 - 8 = 1)。ZAc28资讯网——每日最新资讯28at.com

对于mod() 函数,在一个符号为负数而另一个符号为正数的情况下,它会寻找比被除数更大的倍数。所以对于 mod(9, -4),你要寻找刚刚超过被除数的倍数(4 * 3 = 12)。然后像往常一样,我们再查看差值,所以答案是 12 - 9 = 3。ZAc28资讯网——每日最新资讯28at.com

ZAc28资讯网——每日最新资讯28at.com

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

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

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

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

标签:
  • 热门焦点
  • 影音体验是真的强 简单聊聊iQOO Pad

    大公司的好处就是产品线丰富,非常细分化的东西也能给你做出来,例如早先我们看到了新的vivo Pad2,之后我们又在iQOO Neo8 Pro的发布会上看到了iQOO的首款平板产品iQOO Pad。虽
  • 5月iOS设备性能榜:M1 M2依旧是榜单前五

    和上个月一样,没有新品发布的iOS设备性能榜的上榜设备并没有什么更替,仅仅只有跑分变化而产生的排名变动,刚刚开始的苹果WWDC2023,推出的产品也依旧是新款Mac Pro、新款Mac Stu
  • iPhone卖不动了!苹果股价创年内最大日跌幅:市值一夜蒸发万亿元

    8月5日消息,今天凌晨美股三大指数高开低走集体收跌,道指跌0.41%;纳指跌0.36%;标普500指数跌0.52%。热门科技股也都变化极大,其中苹果报181.99美元,跌4.8%,创
  • Rust中的高吞吐量流处理

    作者 | Noz编译 | 王瑞平本篇文章主要介绍了Rust中流处理的概念、方法和优化。作者不仅介绍了流处理的基本概念以及Rust中常用的流处理库,还使用这些库实现了一个流处理程序
  • 这款新兴工具平台,让你的电脑效率翻倍

    随着信息技术的发展,我们获取信息的渠道越来越多,但是处理信息的效率却成为一个瓶颈。于是各种工具应运而生,都在争相解决我们的工作效率问题。今天我要给大家介绍一款效率
  • 2天涨粉255万,又一赛道在抖音爆火

    来源:运营研究社作者 | 张知白编辑 | 杨佩汶设计 | 晏谈梦洁这个暑期,旅游赛道彻底火了:有的「地方」火了——贵州村超旅游收入 1 个月超过 12 亿;有的「博主」火了&m
  • 腾讯盖楼,字节拆墙

    来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之“想重温暴刷深渊、30+技能搭配暴搓到爽的游戏体验吗?一起上晶核,即刻暴打!”曾凭借直播腾讯旗下代理格斗游戏《DNF》一
  • 三星Galaxy Z Fold5今日亮相:厚度缩减但仍略显厚重

    据官方此前宣布,三星将于7月26日也就是今天在韩国首尔举办Unpacked活动,届时将带来带来包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy
  • 三星显示已开始为AR设备研发硅基LED微显示屏

    7月18日消息,据外媒报道,随着苹果首款头显产品Vision Pro在6月份正式推出,AR/VR/MR等头显产品也就将成为各大公司下一个重要的竞争领域,对显示屏这一关
Top