此页面由 Cloud Translation API 翻译。

CSS min()、max() 和 clamp()

了解如何使用这些得到很好支持的 CSS 函数来控制元素大小、保持适当的间距，以及实现流式排版。

Una Kravets

随着自适应设计变得更加细微，CSS 也在不断完善，以便为作者提供更大的控制权。现在，所有现代浏览器都支持 min()、max() 和 clamp() 函数，它们是使网站及应用编写更动态、响应更迅速的最新工具之一。您可以使用这些函数来控制元素大小和大小调整，保持元素之间的间距，以及创建灵活流畅的排版。

数学函数 calc()、min()、max() 和 clamp() 允许使用包含加号 (+)、减号 (-)、乘号 (*) 和除号 (/) 的数学表达式作为组件值
CSS 值和单位级别 4

浏览器支持

`min()`

浏览器支持

来源

`max()`

浏览器支持

来源

`clamp()`

浏览器支持

来源

用法

您可以在任何 CSS 表达式的右侧使用 min()、max() 和 clamp()，前提是这些值在该位置有意义。对于 min() 和 max()，您需要提供一个值的参数列表，浏览器会确定哪个值最小或最大。例如，对于 width: min(1rem, 50%, 10vw)，浏览器会计算这些相对单位中哪个最小，并将该值用于元素的宽度。

min() 函数会从此 Codepen 演示中的选项列表中选择最小值。

max() 函数对最大值也会执行相同的操作。

max() 函数会从此 Codepen 演示中的选项列表中选择一个值。

如需使用 clamp()，请输入三个值：最小值、用于计算的理想值和最大值。

在此 Codepen 演示中，clamp() 函数会将其值保持在指定的最小值和最大值之间。

您可以在允许使用 <length>、<frequency>、<angle>、<time>、<percentage>、<number> 或 <integer> 的任何位置使用这些函数。您可以将它们单独使用（如在 font-size: max(0.5vw, 50%, 2rem) 中）、与 calc() 一起使用（如在 font-size: max(calc(0.5vw - 1em), 2rem) 中）或组合使用（如在 font-size: max(min(0.5vw, 1em), 2rem) 中）。

以下是有关如何使用这些函数的一些示例。

完美的宽度

根据 Robert Bringhurst 的《The Elements of Typographic Style》（《排版样式元素》）所述，“对于在文本大小的 Serifing 文本面集中的单列页面来说，45 到 75 个字符之间的任何字符都被广泛认为符合要求。”

为确保文本块的宽度保持在 45 到 75 个字符之间，请使用 clamp() 和 ch（宽度为 0 的字符进度）单位：

p {
  width: clamp(45ch, 50%, 75ch);
}

这样，浏览器就可以确定段落的宽度。默认情况下，它会将宽度设置为 50%。如果 50% 小于 45ch，则改用 45ch 作为宽度；如果 50% 大于 75ch，则改用 75ch。

使用 clamp() 函数设置最小和最大宽度。在 Codepen 上查看演示。

您也可以只使用 min() 或 max() 来拆分此类数据。如果您希望该元素始终保持 50% 宽度，并且在较大的屏幕上宽度不超过 75ch，请使用 width: min(75ch, 50%); 设置最大尺寸。

使用 min() 函数设置宽度上限。

同样，您可以使用 max() 函数设置清晰可辨文字的大小下限，如 width: max(45ch, 50%); 所示。在这里，浏览器会选择较大的值，这意味着元素必须大于 45ch 或更宽。

使用 max() 函数设置最小宽度。

管理内边距

您还可以使用 max() 设置最小内边距大小。此示例来自 CSS 技巧，读者 Caluà de Lacerda Pataca 分享了这样一个想法：让元素在较大的屏幕尺寸下具有额外的内边距，但在较小的屏幕尺寸下保持最小的内边距。为此，请使用 calc() 或 max()，并从元素两侧的边距最小值（calc((100vw - var(--contentWidth)) / 2) 或 max(2rem, 50vw - var(--contentWidth) / 2)）中减去。在样式表中，它应如下所示：

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

使用 max() 函数为组件设置最小内边距。在 Codepen 上查看演示。

流体排版

为了实现自适应排版，Mike Riethmeuller 推广了一种技术，该技术使用 clamp() 函数设置字体大小下限和字体大小上限，并允许在这些大小之间进行缩放。

使用 clamp() 创建流畅的排版。在 Codepen 上查看演示。

在 clamp(), 之前，设计字体放大需要复杂的样式字符串。现在，您可以让浏览器为您完成工作。设置可接受的最小字体大小（例如，标题的 1.5rem）、最大字体大小（例如 3rem）和理想字体大小（例如 5vw）。现在，您只需使用很少的代码，即可让排版随页面的视口宽度进行缩放，直到达到最小值和最大值的限制：

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

CSS min()、max() 和 clamp()

浏览器支持

min()

max()

clamp()

用法

完美的宽度

管理内边距

流体排版

更多资源

`min()`

`max()`

`clamp()`