如何在 CSS 中设置 calc() 值的最小值答案

【问题标题】：How to set a minimum value for a calc() value in CSS如何在 CSS 中设置 calc() 值的最小值
【发布时间】：2021-04-13 02:57:45
【问题描述】：

我想知道 CSS 中是否有办法为 calc() 生成的东西设置最小值。例如，目前我有：

left: calc(50% - 500px);

但是，我不希望这个值永远是负数，所以一旦这个值变成负数，它就应该总是为 0。是否有某种我找不到的功能？提前致谢。

【问题讨论】：

你能分享你的完整用例吗，可能比找到一个最小更容易（我怀疑你正在尝试集中一些东西）
也许你可以使用@media 标签来限制你的左 calc()。我不知道是否有像 min-left 这样的东西。但是你能在这个问题中更好地解释你的用法吗？也许有更好的解决方案。
在某些情况下可以使用媒体查询...例如如果偏移父级是 body 元素，那么一个简单的 @media ... (max-width: 500px) { left: 0}.
@SalmanA 在这种情况下它将是 1000 像素，因为它是 50%

标签： html css

【解决方案1】：

作为纯 CSS 解决方案，您不能在 calc() 中“设置最小值”，因为该函数仅接受 1 个参数 [或操作数组作为 1 个参数] 并使用 <length>、<frequency> 执行计算,<angle>,<time>,<percentage>,<number>,<integer>dimension values，至少as it stands now

由于负数是可能的，并且假设您希望在“默认”和计算结果之间获得 2 个数字之间的最小值/最大值，因此您无法使用简单的基本算术来找到最大值。

跳出框框思考，它看起来像这样max = (a+b+|a-b|)/2：

div {
    --a: calc(50% - 500px);  
    --b: 0px;
  --apb: calc(var(--a) + var(--b)); 
  --amb: calc(abs(var(--a) - var(--b))); /* this won't work because we need an absolute value here, which you can not get with simple arithmetic */
  --max: calc( (var(--apb) + var(--amb)) / 2); 

  left: var(--max);
}

在某些情况下，CSS 值的范围无效，例如 RGB 值。 RGB 值不能小于 0，因此即使计算的计算是负数，calc() 结果集也被认为是有效的 RGB 值，但由于 RGB 具有不同的范围，因此不适用。但是，这对于维度来说是不同的，除非您在计算中的某处明确抛出除以零错误以强制结果无效，否则允许使用负数。

【讨论】：

【解决方案2】：

你可以使用：

left: max(0, 50% - 500px);

更多详情check this

更新：

如果您确实需要使用 calc() 来计算最大值，我想没有可用的直接过程。

【讨论】：