在 HTML 中，CSS 并不支持 rem() 函数用于数学运算（如取余），rem() 是一个单位函数，用于设置字体大小等样式属性。因此，无法直接通过 CSS 的 rem() 函数来计算两个值的余数并保留被除数的符号。如果你是想在 JavaScript 中实现类似功能，可以使用 % 运算符，并结合 Math.sign() 来保留被除数的符号。例如：function remainderWithSig

CSS 中根本不存在用于数学运算的 `rem()` 函数——`rem` 仅是一个相对长度单位，与取余等计算毫无关系；真正支持数值计算的 `calc()`、`min()`、`max()` 和 `clamp()` 均不支持取余操作，更无法保留被除数符号，因此任何试图在纯 CSS 中实现带符号余数逻辑的尝试都会失败；若需此类功能（如 `Math.remainder(-7, 3)` 的精确语义），唯一可靠且跨浏览器的方案是借助 JavaScript 计算后通过 CSS 自定义属性注入结果——这不仅是技术现实，更是现代 Web 开发中 CSS 与 JS 各司其职的典型体现。

rem() 不是 CSS 标准函数，CSS 中没有 rem() 函数用于计算余数。

为什么找不到 rem() 函数

CSS 里 rem 是一个**长度单位**（root em），表示相对于根元素（）字体大小的倍数，和数学运算完全无关。你看到的 rem() 很可能混淆了以下几种情况：

• JavaScript 的 rem()（如某些 polyfill 或自定义工具函数，但非原生）
• 预处理器（如 Sass、Less）中误写的自定义函数
• 把 Python/JS 的 Math.rem()（实际也不存在；JS 用 %，Python 有 math.remainder()）记混到 CSS
• 浏览器实验性提案（截至 2024 年，CSS Values and Units Level 5 草案中仍无 rem() 运算函数）

CSS 中真正能做数值计算的函数只有 calc()、min()、max()、clamp()

它们都**不支持取余运算**，更不处理“保留被除数符号”的语义（即 IEEE 754 的 remainder() 行为）。例如：

width: calc(17px % 5px); /* ❌ 语法错误：calc 不支持 % 运算符 */

即使你写成：

width: calc(17 / 5); /* ✅ 合法，但结果是 3.4，不是余数 */

也无法得到 2（或带符号的 2），更无法实现类似 Math.remainder(-7, 3) 返回 2（而非 -1）的效果。

如果真需要“带符号余数”逻辑，必须交由 JavaScript 处理

CSS 本身不具备运行时数值分析能力。可行路径只有：

• 在 JS 中计算 Math.remainder(a, b)（ES2020+ 支持），然后将结果写入自定义属性：
  document.documentElement.style.setProperty('--rem-result', Math.remainder(−7, 3));
• 在 CSS 中通过 calc() 引用该变量：
  left: calc(var(--rem-result) * 1px);
• 注意：CSS 自定义属性值是字符串，JS 写入时需确保是纯数字（不含单位），否则 calc() 会解析失败

真正容易被忽略的是：CSS 所有计算都是静态、无状态、无分支的——它连 if 都没有，更别说浮点余数的符号规则了。想绕过 JS 实现这个需求，目前没有合法、跨浏览器的方案。

好了，本文到此结束，带大家了解了《在 HTML 中，CSS 并不支持 rem() 函数用于数学运算（如取余），rem() 是一个单位函数，用于设置字体大小等样式属性。因此，无法直接通过 CSS 的 rem() 函数来计算两个值的余数并保留被除数的符号。如果你是想在 JavaScript 中实现类似功能，可以使用 % 运算符，并结合 Math.sign() 来保留被除数的符号。例如：function remainderWithSign(a, b) { return Math.sign(a) * (Math.abs(a) % Math.abs(b)); }这个函数会返回 a % b 的结果，并保持与 a 相同的符号。总结： CSS 不支持 rem() 用于数学运算。如果需要在网页中实现类似功能，应使用 JavaScript。》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！