如何避免 css calc 函数出现负值？

Question

我正在使用css-tricks 中的 css calc 函数

calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

我像这样使用 calc 函数

margin-top: calc(270px + (0 - 270) * (100vw - 320px) / (900 - 320));

这margin-right是可行的，我的视口宽度为 320 像素时为 270 像素，视口宽度为 900 像素时为 0 像素。但是当我将窗口大小调整为大于 时900px，结果margin-right为负。

我可以使用媒体查询，但是还有其他 CSS 解决方案吗？我可以将这些计算函数与min() max()或clamp()避免负值结合起来吗？

编辑

我找到了一个可能的解决方案。max()它以这种方式工作

margin-right: max(0vw, calc(270px + (0 - 270) * ((100vw - 320px) / (900 - 320))))

Answer 1

对于所有感兴趣的人。我最终得到了这个CSS规则。

如果你的最小值是负数，你需要min()这样的 css 函数

margin-right: min(0vw, calc(-270px + (0 - -270) * ((100vw - 320px) / (900 - 320))))

如果你的最小值是正数，你需要max()这样的 css 函数

margin-right: max(0vw, calc(270px + (0 - 270) * ((100vw - 320px) / (900 - 320))))