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

了解如何使用这些受良好支持的 CSS 函数来控制元素大小调整、保持适当的间距以及实现流畅的排版。

Una Kravets

随着响应式设计变得越来越精细，CSS 不断发展，为作者提供更多的控制权。min()、max() 和 clamp() 函数现已在所有现代浏览器中受支持，是使网站和应用创作更具动态性和响应性的最新工具。您可以使用这些函数来控制元素大小和调整大小、保持元素之间的间距以及创建灵活且流畅的排版。

数学函数 calc()、min()、max() 和 clamp() 允许将包含加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 的数学表达式用作组件值

CSS 值和单位级别 4

浏览器支持

min()

浏览器支持

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

来源

max()

浏览器支持

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

来源

clamp()

浏览器支持

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

来源

用法

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

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

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

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

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

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

您可以在允许使用 <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) 的《版式风格的要素》，“对于以衬线字体和文本大小设置的单列页面，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 Tricks，读者 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);
}

更多资源

封面图片来自 Unsplash 上的 @yer_a_wizard。