MDN：developer.mozilla.org/zh-CN/docs/…
CSS 中的 min()、max() 和 clamp() 是数学函数，用于在样式表中动态计算值。它们可以帮助你创建更灵活和响应式的布局。
1. min()
min() 函数用于从一组值中选择最小的值。
语法
property: min(value1, value2, ...);
示例
width: min(100%, 500px);
在这个例子中，width 的值将是 100% 和 500px 中的较小者。如果容器的宽度小于 500px，则 width 为 100%；否则，width 为 500px。
使用场景
- 限制元素的最大宽度或高度。
- 创建响应式布局，确保元素不会超过某个固定尺寸。
- 不只是width，padding 配合min函数也特别好用，min(5em,8%)或者min(10px,8%)
2. max()
max() 函数用于从一组值中选择最大的值。
语法
property: max(value1, value2, ...);
示例
width: max(50%, 300px);
在这个例子中，width 的值将是 50% 和 300px 中的较大者。如果容器的宽度大于 600px，则 width 为 50%；否则，width 为 300px。
使用场景
- 确保元素的最小宽度或高度。
- 创建响应式布局，确保元素不会小于某个固定尺寸。
3. clamp()
clamp() 函数用于将一个值限制在一个范围内，接受三个参数：最小值、首选值和最大值。
语法
property: clamp(min, preferred, max);
示例
font-size: clamp(1rem, 2.5vw, 2rem);
在这个例子中，font-size 的值将根据视口宽度动态调整，但不会小于 1rem，也不会大于 2rem。2.5vw 是首选值，表示字体大小是视口宽度的 2.5%。
但是需要注意的是,不要直接写clamp(1rem, 2.5vw, 2rem)，因为2.5vw始终是只会被设备影响值的大小，会导致用户系统设置125%缩放或者浏览器ctrl+的缩放不起作用。所以需要使用下面配合rem或者px值的方案最好。这样就也可以放大缩小文字
使用场景
- 创建响应式字体大小，确保字体大小在合理范围内。
- 动态调整元素尺寸，使其在不同屏幕尺寸下都能良好显示。
区别总结
min()：从一组值中选择最小的值。max()：从一组值中选择最大的值。clamp()：将一个值限制在一个范围内，确保其在最小值和最大值之间。
使用建议
- 使用
min()和max()来限制元素的尺寸，确保它们不会超过或小于某个值。 - 使用
clamp()来创建动态且响应式的布局，特别是在处理字体大小和元素尺寸时。
注意事项
- 这些函数在现代浏览器中得到广泛支持，但在旧版浏览器中可能无法使用。
- 在使用这些函数时，确保值的单位一致，以避免意外的计算结果。
总结：min()、max() 和 clamp() 是强大的 CSS 函数，可以帮助你创建更灵活和响应式的布局。根据具体需求选择合适的函数来动态计算样式值。
