此页面由 Cloud Translation API 翻译。

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

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

Una Kravets

随着响应式设计变得越来越细致，CSS 也在不断演变，能够增强控制力min()、 max()和 clamp() 函数，可支持所有现代浏览器的功能之一，使网站和应用更具动态性和响应性。您可以使用这些函数来控制元素大小和大小，保持元素之间的间距和创建灵活流畅的排版。

数学函数 calc()、min()、max() 和 clamp() 允许将带有加法 (+)、减号 (-)、乘法 (*) 和除法 (/) 的数学表达式用作分量值
CSS 值和单位级别 4

浏览器支持

`min()`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

`max()`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

`clamp()`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

用法

您可以在任何 CSS 的右侧使用 min()、max() 和 clamp() 适当地加以理解。对于 min() 和 max()，您需要提供参数列表，浏览器会确定哪一个是最小或最大。例如，对于 width: min(1rem, 50%, 10vw)，浏览器会计算其中哪个相对单位最小，并使用元素的宽度值。

</ph> <ph type="x-smartling-placeholder">

min() 函数会 Codepen 演示。

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

</ph> <ph type="x-smartling-placeholder">

在此示例中，max() 函数 Codepen 演示。

要使用“clamp()”，请输入三个值：一个最小值、一个理想值以及最大值。

</ph> <ph type="x-smartling-placeholder">

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)）。

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

理想宽度

根据 The Elements of Typographic 而言风格 “从 45 到 75 个字符之间，任何字符都被广泛认为 Serif 字体字体中的单列页面集的行长符合要求文字大小。”

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

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

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

</ph> <ph type="x-smartling-placeholder">

使用 clamp() 函数设置最小和最大宽度。请参阅 Codepen 上的演示。

您也可以仅使用 min() 或 max() 拆分该行。如果您希望元素始终采用 50% 宽度，并且在较大尺寸上，元素宽度不超过 75ch 屏幕，请使用 width: min(75ch, 50%); 设置大小上限。

</ph> <ph type="x-smartling-placeholder">

使用 min() 函数设置最大宽度。

同样，您可以使用 max() 为清晰可辨的文本设置最小尺寸函数，如 width: max(45ch, 50%);。在这里，浏览器会选择值更大，这意味着此元素必须大于或等于 45ch。

</ph> <ph type="x-smartling-placeholder">

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

管理内边距

您还可以使用 max() 设置最小内边距大小。此示例来自 CSS 技巧读者 Calu{7} 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() 函数设置最小字体大小、最大字体大小并允许在这些尺寸之间进行缩放

</ph> <ph type="x-smartling-placeholder">

使用 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()`