Question

是否可以做这样的事情

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

或

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

CSS中的

？

Answer 1

不，你不能。已从CSS3值和单位中删除max()和min()。但它们可能是re-introduced in CSS4 Values and Units。目前没有针对它们的规范，calc()规范没有提及它们在calc()函数内有效。

Answer 2

现在使用媒体查询实际上可以实现'纯'css解决方案：

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

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

Answer 3

解决方法是使用width本身。

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

Answer 4

min()，max()和clamp()终于可以使用了！

从Firefox 75，Chrome 79和Safari 11.1（在13.1中为clamp）开始。

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

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

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

因此，原始示例可以写为：

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

Answer 5

@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>

Answer 6

将max更改为Max，您会看到肮脏的魔法

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

Answer 7

@david-mangold's answer above被“关闭”时是不正确的。
（如果您想要最大宽度而不是最大宽度，则可以使用他的解决方案）。

此解决方案表明@gert-sønderby对该答案的注释确实有效：
答案应该使用min-width，而不是max-width。

它应该是这样的：

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

是的，使用 min-width 加宽度来模拟 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's answer above可能更容易推论，并且在许多用例中可能更合适。

还请注意，最终会在CSS中引入max()和min()函数，但截至2019年4月，它尚未成为规范的一部分。

在这里您可以检查max()浏览器的兼容性：
https://developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility。
这是提案的草案：
https://drafts.csswg.org/css-values-4/#comp-func。
滚动到页面顶部以查看最新修订日期（截止到今天，它的最新修订于2019年4月5日）。

Answer 8

仅dart-sass https://sass-lang.com/documentation/syntax/special-functions#min-and-max支持此功能。

您还可以使用字符串插值（类似于CSS变量）在dart-sass之外工作

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

CSS中的最大值或最大值计算值

8 个答案: