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

Question

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

Answer 1

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

这与我假设它的工作原理相呼应。当屏幕以任何容量变化时，浏览器会重新绘制并重新呈现它需要的任何元素。如果您调整 dom 的大小、添加或删除内容，或者发生任何其他更改，浏览器将根据需要重新绘制和重新呈现。

我附上了我粗略的代码笔示例，如果您的尺寸小于 500 像素，红色框的尺寸将更改以匹配新的自定义属性尺寸。

: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

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

How often is the calc function executed in CSS?

css

responsive-design