计算的最大值，或者在 CSS 中的最大值

有没有可能做这样的事

max-width: calc(max(500px, 100% - 80px))

或者

max-width: max(500px, calc(100% - 80px)))

在 CSS 中？

124738 次浏览
小开

不，你不能。max()和 min()已从 CSS3数值和单位中删除。然而，它们可能是 价值观和单位。目前还没有关于它们的规范，而且 calc()规范也没有提到它们在 calc()函数中是有效的。

小开

变通方法是使用 width本身。

max-width: 500px;
width: calc(100% - 80px);
小开

一个纯粹的 css 解决方案实际上是可能的，现在使用媒体查询:

.yourselector {
max-width: calc(100% - 80px);
}


@media screen and (max-width: 500px) {
.yourselector {
max-width: 500px;
}
}
小开

@ Amaud 为了得到同样的结果，还有其他选择吗？

有一种非 js 的纯 css 方法可以达到类似的结果。您需要调整父元素容器填充/边距。

.parent {
padding: 0 50px 0 0;
width: calc(50%-50px);
background-color: #000;
}


.parent .child {
max-width:100%;
height:50px;
background-color: #999;
}
<div class="parent">
<div class="child"></div>
</div>

小开

虽然 @ David-Mangold 上面的回答，是“接近”它是不正确的。
(如果需要 最低限度宽度，而不是 最大值宽度，可以使用 可以的解决方案)。

这个解决方案证明了@gert-sønderby 对这个答案的评论是有效的:
答案应该使用 min-width，而不是 max-width。

这是它本应该说的话:

min-width: 500px;
width: calc(100% - 80px);

是的，使用 最小宽度加 宽度来模拟 Max ()函数。

下面是 Codepen(在 CodePen 上更容易看到演示，您可以为自己的测试编辑它)。

.parent600, .parent500, .parent400 {
height: 80px;
border: 1px solid lightgrey;
}
.parent600 {
width: 600px;
}
.parent500 {
width: 500px;
}
.parent400 {
width: 400px;
}


.parent600 .child, .parent500 .child, .parent400 .child {
min-width: 500px;
width: calc(100% - 80px);
border: 1px solid blue;
height:60px;
}


.ruler600 {
width: 600px;
border: 1px solid green;
background-color: lightgreen;
height: 20px;
margin-bottom: 40px;
}
.width500 {
height: 20px;
width: 500px;
background-color: lightyellow;
float: left;
}
.width80 {
height: 20px;
width: 80px;
background-color: green;
float: right;
}


.parent600 .wrong, .parent500 .wrong, .parent400 .wrong {
max-width: 500px;
width: calc(100% - 80px);
border: 1px solid red;
height:60px;
}
<h2>(Min) min-width correctly gives us the Larger dimension: </h2>
<div class="parent600">
600px parent
<div class="child">child is max(500px, 600px - 80px) = max(500px, 520px) = 520px</div>
</div>


<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>


<div class="parent500">
500px parent
<div class="child">child is max(500px, 500px - 80px) = max(500px, 420px) = 500px</div>
</div>


<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>


<div class="parent400">
400px parent (child expands to width of 500px)
<div class="child">child is max(500px, 400px - 80px) = max(500px, 320px) = 500px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>




<h2>(Max) max-width <em>incorrectly</em> gives us the Smaller dimension: </h2>
<div class="parent400">
400px parent
<div class="wrong">child is min(500px, 400px - 80px) = min(500px, 320px) = 320px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>


<div class="parent500">
500px parent
<div class="wrong">child is min(500px, 500px - 80px) = min(500px, 420px) = 420px</div>
</div>


<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>


<div class="parent600">
600px parent
<div class="wrong">child is min(500px, 600px - 80px) = min(500px, 520px) = 500px</div>
</div>


<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

也就是说，@ Andy 的回答在上面可能更容易推理，并且在许多用例中可能更合适。

还要注意的是，可以在 CSS 中引入 最终 a max()和 min()函数，但是到2019年4月为止，它还不是规范的一部分。

小开
最佳答案

min() 、 max()和 clamp()终于可用了！

支持从 Firefox 75、 Chrome 79和 Safari 11.1开始(Safari 13.1提供了 clamp)。

min()和 max()接受任意数量的参数。

clamp()的语法为 clamp(MIN, VAL, MAX)，等效于 max(MIN, min(VAL, MAX))。

min()和 max()可能是嵌套的。它们既可以在 calc()中使用，也可以在 calc()之外使用，它们还可以包含数学表达式，这意味着在使用它们时可以避免使用 calc()。

因此，最初的示例可以写成:

max-width: max(500px, 100% - 80px);
小开

这是只支持在省道 -sass https://sass-lang.com/documentation/syntax/special-functions#min-and-max。

您还可以使用字符串插值(类似于 CSS 变量) ，以便在省道外工作

max-width: #{"max(500px, calc(100% - 80px))"}
小开

把 max改成 Max，你会看到肮脏的魔术

max-width: Max(500px, calc(100% - 80px)))

提交答案