CSS min()、max() 和 clamp()
随着自适应设计变得更加精细，CSS 也在不断发展完善，以便为作者提供更多控制。现在，所有现代浏览器均支持 min()、max() 和 clamp() 函数，它们是为了使网站和应用编写更加动态、响应更快的最新工具之一。您可以使用这些函数来控制元素的大小和大小调整、保持元素之间的间距，以及创建灵活流畅的排版。
数学函数
calc()、min()、max()和clamp()允许将带有加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 的数学表达式用作组成部分值
用法介绍
在合适的情况下，您可以在任何 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 的 The Typographic Style Element of Typographic Style [排版样式元素]，“从 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);
}
