主页 / coding / 问题 / 79166592
Accepted
Kaffa
Asked: 2024-11-07 21:08:29 +0800 CST

为什么当浏览器窗口大小调整时，css 函数 mod() 2 有时会显示结果 2？

  • 772

代码显示0和1，为什么有时会显示2？

我的浏览器是Microsoft Edge v130，Chrome v130也是这样。

@property --vw {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vw;
}
:root {
  --w: mod(tan(atan2(var(--vw), 1px)), 2);
}
body::before {
  counter-reset: w var(--w);
  content: counter(w);
}
<body></body>

css

2 个回答

  1. Best Answer

    当您使用calc或其他 CSS 函数时，可能很难看到计算值是什么。如果这样做，getComputedStyle(document).getPropertyValue("--w")您只会得到公式，而不是值。
    查看计算值的一个技巧是将其分配给实际属性。由于您的--w属性没有单位，您可以将其分配给 line-height。

    body {
  font-size: 1px;
  line-height: var(--w);
}

    现在，您可以看到值，例如可能是 1.99。该counter-reset属性仅接受整数，而 2 已经“足够接近”了。

    您可以使用 round() 对数字进行四舍五入（向上、向下、最接近的整数或四舍五入为零）：

    :root {
  --w: mod(round(nearest, tan(atan2(var(--vw), 1px)) ), 2);
}

    （round()也可以超出mod()，只要您觉得合理即可）

    • 4

  2. 您的代码有时显示 2 而不是 0 或 1 的原因是由于浮点数。您可以尝试使用 min

        :root {
  --w: round(mod(nearest, tan(atan2(var(--vw), 1px)) ), 2);
}

    或者

    :root {
      --w: mod(round(nearest, tan(atan2(var(--vw), 1px)) ), 2);
    }
    • 0

相关问题