min()、max() 和 clamp()：今天要使用的三个逻辑 CSS 函数
了解如何使用这些支持良好的 CSS 函数控制元素大小，以及保持适当的间距和实现流畅的排版。
随着响应式设计的不断发展，界面变得越来越精细，CSS 也在不断发展，并且为作者提供的控制能力也越来越强大。现代浏览器支持 min()、max() 和 clamp() 函数，它们是让创作网站和应用程序更具动态性和响应性的一些最新工具。
谈到灵活和流畅的排版、受控制的元素大小调整和保持适当的间距，min()、max() 和 clamp() 可以提供帮助。
背景 #
数学函数
calc()、min()、max()和clamp()支持将使用加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 的数学表达式作为组件值
2019 年 4 月，Safari 成为第一款包含整套函数的浏览器，当年晚些时候，Chromium 也在版本 79 中包含了这些函数。这一年，随着 Firefox 75 发布，主要浏览器基本上都已经开始支持 min()、max() 和 clamp()。
用法 #
您可以在任何有意义的 CSS 表达式的右侧使用 min()、max() 和 clamp()。对于 min() 和 max()，您要提供一个参数值列表，浏览器则会分别确定哪个是最小值以及哪个是最大值。例如，对于：min(1rem, 50%, 10vw)，浏览器会计算这些相对单位中哪一个最小，并将该值用作实际值。
max() 函数从逗号分隔的表达式列表中选择最大值。
要使用 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)）。
总结：
min(<value-list>)：从逗号分隔的表达式列表中选择最小值（最小负数）max(<value-list>)：从逗号分隔的表达式列表中选择最大值（最大正数）clamp(<min>, <ideal>, <max>)：根据设定的理想值，将值限定在上限与下限之间
我们来看几个例子。
理想宽度 #
Robert Bringhurst 在《The Elements of Typographic Style》中说：“对于有衬线字体的单列页面，一般认为一行 45 到 75 个字符的长度是比较理想的。”
为了确保文本块不少于 45 个字符，也不超过 75 个字符，请使用 clamp() 和 ch（字符前 0 宽度）单位：
p {
width: clamp(45ch, 50%, 75ch);
}这样，浏览器就可以确定段落的宽度。它会将宽度设置为 50%，但如果 50% 的宽度小于 45ch，则会选择 45ch，反之，如果 50% 的宽度比 75ch 更宽，则会选择 75ch。在本演示中，卡片的尺寸被限定了：
只需要使用 min() 或 max() 函数，您就可以打破这种限制。如果您希望元素使用 50% 的宽度，并且不超过 75ch（即在较大的屏幕上），则可以这样编写代码：width: min(75ch, 50%);。实际上，这是使用 min() 函数来设置“最大”大小。
同样，您也可以使用 max() 函数来设定最小尺寸，从而让文本清晰易读。例如：width: max(45ch, 50%);。这样，浏览器就会选择 45ch 或 50% 中较大的值，这意味着元素至少 为 45ch，否则会更大。
填充管理 #
与上述概念相同，min() 函数可以设置“最大”值，而 max() 函数可以设置“最小”值，您也可以使用 max() 来设置最小填充大小。示例来自 CSS 技巧，下面是读者 Caluã de Lacerda Pataca 分享的想法：让元素在较大尺寸的屏幕上进行额外填充，但在较小尺寸的屏幕上保持填充最小（尤其是对于内联填充）。为此，您要使用 calc() 并从任意一侧减去最小填充：calc((100vw - var(--contentWidth)) / 2)，或者使用 max：max(2rem, 50vw - var(--contentWidth) / 2)。总之，代码如下：
footer {
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}流畅的排版 #
为了实现流畅的排版，Mike Riethmeuller 推广了一种技术。该技术使用 calc() 函数来设置最小字体大小、最大字体大小，并允许从最小值放大至最大值。
凭借 clamp()，您可以更清楚地编写这一段代码。不需要复杂的字符串，浏览器就可以完成这项工作。设置可接受的最小字体大小（例如，标题为 1.5rem，最大大小（即 3rem）和理想大小为 5vw。
现在，我们实现了可随页面视口宽度进行缩放，直到达到限制的最小值和最大值的的排版效果，代码行变得更加简洁：
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}总结 #
CSS 数学函数 min()、max() 和 clamp() 非常强大，而且支持良好，当您构建响应式 UI 时，这些函数可能大有帮助。如需更多资源，请查看：
Unsplash 上 @yer_a_wizard 的封面图片。