minmax和clamp三个逻辑
了解如何使用这些受支持的CSS函数控制元素的大小，保持适当的间距以及实现流体排版。
随着响应式设计的发展和日益细化，CSS本身也在不断发展，并为作者提供了更多的控制权。的 min()， max()和 clamp()功能，现在支持所有现代浏览器，都在做创作网站最新的工具中和网络应用更加积极地应用。
当谈到灵活和流体排版，控制单元调整大小，并保持适当的间隙，min()，max()，和clamp()可以提供帮助。
背景
数学函数，
calc()，min()，max()，和clamp()允许与另外的数学表达式（+），减（ - ），乘（*），和除（/），以用作组分值 CSS值和单位级别4
Safari是在四月2019年第一个支持 的，以后，今年79版，与Firefox 75版本，我们现代浏览器的min()，max()和clamp()支持情况如下。
您可以在任何有意义的CSS表达式的右侧使用min()，max()和clamp()。对于min()和max()，您提供了一个值列表，然后浏览器确定哪一个分别是最小的或最大的。例如，对于：min(1rem, 50%, 10vw)，浏览器将计算这些相对单位中的最小单位，并将该值用作实际值。max()函数从逗号分隔的表达式列表中选择最大值。clamp()输入三个值：最小值，理想值（从中进行计算）和最大值。
您可以单独使用它们（即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()，max()或clamp() 功能，可以mix上calc()。例如，写font-size: max(calc(0.5vw - 1em), 2rem)将与相同font-size: max(0.5vw - 1em, 2rem)。
回顾一下：
min()：从逗号分隔的表达式列表中选择最小（最负数）的值max()：从逗号分隔的表达式列表中选择最大（最正）的值clamp(, , )：根据设定的理想值在上限和下限之间钳位一个值
示例：完美的宽度
根据 罗伯特·布林赫斯特（Robert Bringhurst）的《印刷风格要素》，“对于以文本大小设置在带衬线的文本面上的单列页面，从45到75个字符的任何长度都被认为是令人满意的行长。”
为确保您的文本块不小于45个字符或不大于75个字符，请使用clamp()和ch（字符0宽度）单位：
p {
width: clamp(45ch, 50%, 75ch);
}
这允许浏览器确定段落的宽度。它将宽度设置为50％，除非50％小于45ch，这时45ch将选择，反之亦然，如果50％大于则反之亦然75ch。