调整浏览器窗口时，CSS的mod()函数取模2为何有时显示结果2？

你的代码逻辑是通过tan(atan2(var(--vw), 1px))得到视口宽度与1px的比值，再对2取模，理论上结果只会是0或1，但偶尔显示2的核心原因是浮点数精度误差与无穷大值的处理逻辑：

• 数学上tan(atan2(y, x)) = y/x，但浏览器浮点计算存在精度限制：当视口宽度很大时，atan2(var(--vw), 1px)的结果会非常接近π/2（90度），而tan(π/2)在数学上是无穷大。浏览器无法精确表示无穷大，会用极大有限值替代或标记为无穷大。
• CSS的mod()函数对无穷大值的处理没有严格统一规范：Chrome/Edge v130中，mod(∞, 2)可能返回2，导致counter-reset取整后显示2。
• 即使视口宽度是整数像素，浮点计算的微小偏差也可能让tan(atan2())结果略小于2的整数倍，此时mod()结果接近2，部分浏览器会因精度问题向上取整为2。

直接简化逻辑，跳过冗余的三角函数计算（tan(atan2(y,x))本质等价于y/x），避免触发无穷大异常：

@property --vw {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vw;
}
:root {
  /* 直接将长度转换为数值后对2取模 */
  --w: mod(calc(var(--vw) / 1px), 2);
}
body::before {
  counter-reset: w var(--w);
  content: counter(w);
}

修改后既保留原本逻辑，又彻底避免了三角函数带来的精度问题，结果会稳定显示0或1。

内容的提问来源于stack exchange，提问作者Kaffa