146

有没有可能做这样的事情

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

或者

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

在 CSS 中？

4

8 回答 8

122

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

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

@media screen and (max-width: 500px) {
  .yourselector {
    max-width: 500px;
  }
}
于 2016-06-02T19:02:24.620 回答
103

你不能。max()并min()已从 CSS3 值和单位中删除。然而，它们可能会在 CSS4 值和单位中重新引入。目前没有针对它们的规范，calc()规范也没有提到它们在函数内部都是有效的calc()。

于 2013-05-17T20:36:51.307 回答
46

一种解决方法是使用width它自己。

max-width: 500px;
width: calc(100% - 80px);
于 2015-10-13T11:01:29.090 回答
42

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

支持从 Firefox 75、Chrome 79 和 Safari 11.1 开始（clamp在 Safari 13.1 中可用）。

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

clamp()有语法clamp(MIN, VAL, MAX)并且等价于max(MIN, min(VAL, MAX)).

min()并且max()可以嵌套。它们可以在calc()里面和外面使用，它们也可能包含数学表达式，这意味着你可以避免calc()使用它们。

因此，原来的例子可以写成：

max-width: max(500px, 100% - 80px);
于 2020-04-07T16:50:27.360 回答
14

虽然上面@david-mangold 的回答是“接近”，但它是不正确的。
（如果你想要一个最小宽度，而不是最大宽度，你可以使用他的解决方案）。

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

这是它应该说的： 

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

是的，使用min-width plus 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 上面的答案可能更容易推理，并且在许多用例中可能更合适。

另请注意，最终可能会在 CSS 中引入amax()和 amin()函数，但截至 2019 年 4 月，它不再是规范的一部分。

  • 您可以在此处检查max()浏览器兼容性：
    https ://developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility 。

  • 以下是提案草案：
    https ://drafts.c​​sswg.org/css-values-4/#comp-func 。
    滚动到页面顶部以查看最后修订日期（截至今天，最后修订日期为 2019 年 4 月 5 日）。

于 2019-04-09T15:05:57.773 回答
7

换成你max会Max看到肮脏的魔法

max-width: Max(500px, calc(100% - 80px)))
于 2020-11-24T02:28:25.347 回答
1

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

于 2018-01-25T17:41:02.797 回答
1

这仅在 dart-sass https://sass-lang.com/documentation/syntax/special-functions#min-and-max中受支持。

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

max-width: #{"max(500px, calc(100% - 80px))"}
于 2020-09-11T22:27:21.130 回答