CSS 中 calc 函数执行的频率是多少？

Question

只是好奇 css

calc

函数执行的频率。是在页面加载时执行一次还是每次调整页面大小时都重新计算？用谷歌搜索了一下，但我找不到答案。似乎只需要计算一次，但我不确定。

Answer 1

我刚刚做了一个非常粗略的测试，在宽度计算中添加了一个自定义属性，并在媒体查询中更改了该自定义属性。我的元素的宽度在调整大小时确实发生了变化。

这与我假设的效果相呼应。当屏幕发生任何变化时，浏览器会重新绘制和重新渲染所需的任何元素。如果您调整大小、在 dom 中添加或删除内容，或者发生任何其他更改，浏览器将根据需要重新绘制和重新渲染。

我已经附上了我的粗略的 codepen 示例，如果您的大小低于 500px，红色框的大小将更改以匹配新的自定义属性大小。

:root {
  --calcTest: 100px;
}

.test {
  height: 100px;
  width: 100px;
  background-color: red;
  width: calc(100px + var(--calcTest));
}

@media (max-width: 500px) {
  :root {
    --calcTest: 500px;
  }
}

https://codepen.io/goodwinc/pen/oNgXNmq