css min() 和 max() 函数与 min-width 和 max-width

Question

我见过人们使用 min() 和 max() css 函数而不是像这样的 max-width 或 min-width 属性：

width: min(440px, 100%);

代替经典：

width: 440px;
max-width: 100%;

哪个更好？我的意思是，使用 min() 或 max() 是否有任何性能警告，或者使用它是否很好？ 就我而言，我认为

max-width

方式比

min()

函数更容易理解，您觉得呢？

谢谢

Answer 1

在大多数情况下，您使用哪一种可能不会产生任何影响。然而，在某些情况下，结果可能会有所不同，具体取决于您使用的类型。以这段代码为例，其中每个段落都位于宽度为 max-content

的父 div 内

div {
  width: max-content;
  border: 1px solid blue;
}
p {
  border: 1px solid red;
}
.p1 {
  width: 75%;
  max-width: 150px;
}
.p2 {
  width: min(75%, 150px);
}

<div>
  <p class="p1">
    Lorem ipsum dolor sit amet, consectetur
  </p>
</div>
<div>
  <p class="p2">
    Lorem ipsum dolor sit amet, consectetur 
  </p>
</div>

我们可以看到，子级的最大宽度包含在父级最大内容的计算中，而使用 min() 函数时情况并非如此。

Answer 2

据我所知，他们给出了相同的结果。

.d1 {
  width: min(440px, 100%);
  background: pink;
}

.d2 {
  width: 440px;
  max-width: 100%;
  background: cyan;
}

<div class="d1">1</div>
<div class="d2">2</div>