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

Question

有可能做这样的事情

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

要么

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

在CSS？

Answer 1

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

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

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

Answer 2

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

Answer 3

解决方法是使用width自己.

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

Answer 4

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);

Answer 5

虽然@大卫-曼戈尔德的回答以上，是“关闭”这是不正确的。
（如果您需要最小宽度而不是最大宽度，则可以使用他的解决方案）。

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

这是应该说的：

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

是的，使用min-width和width来模拟max（）函数。

这是Codepen（更容易在CodePen上观看演示，您可以对其进行编辑以进行自己的测试）。

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

.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;
}

也就是说，上述@andy的答案可能更容易推论，并且在许多用例中可能更合适。

另请注意，最终 a max()和min()函数可能会引入CSS，但截至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日）。

Answer 6

更改max到Max，你会看到肮脏的魔法

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