max()函数可从多个值中选取最大值用于字体大小，实现响应式文本。例如font-size: max(1rem, 1.5vw)在小屏用1rem，大屏随视口放大；相比clamp()仅设下限无上限，适合无需严格限制字体上限的场景，主流浏览器已支持，旧版可加降级方案兼容。
使用 CSS 的 max() 函数可以灵活调整字体大小，让文本在不同屏幕尺寸下保持可读性和响应性。它允许你设置一个字体大小的“最小上限”，确保文字不会太小，也不会过大。
什么是 max() 函数？
max() 是 CSS 中的数学函数，用于从多个值中选择最大的一个。你可以将它用在 font-size 属性中，结合相对单位（如 rem、em、vw）和绝对单位（如 px），实现更智能的字体缩放。
例如：
font-size: max(1rem, 1.5vw);
立即学习“前端免费学习笔记（深入）”；
浏览器会在这两个值中选较大的那个作为最终字体大小。小屏时用 1rem，大屏时随着视口变宽，1.5vw 会超过 1rem，字体就会变大。
如何用 max() 实现响应式字体？
你可以通过组合固定大小和视口单位，让字体在移动端保持清晰，在桌面端适当放大。
常用写法示例：
-
font-size: max(1rem, 1.2vw);—— 基础为 1rem，宽度增加时缓慢放大 -
font-size: max(16px, 1.5vh);—— 防止字体小于 16px，适合可读性要求高的内容 -
font-size: max(1.2rem, 4vw);—— 标题类使用，大屏时显著放大
这种写法不需要媒体查询就能实现平滑缩放，代码更简洁。
与 clamp() 的区别
虽然 max() 很有用，但如果你希望限制字体的最大值，建议使用 clamp()：
font-size: clamp(1rem, 2.5vw, 2rem);
表示字体最小 1rem，理想 2.5vw，最大不超过 2rem。而 max() 只设下限，没有上限控制，大屏可能字体过大。
浏览器兼容性注意事项
目前主流浏览器都支持 max() 函数（Chrome 79+, Firefox 75+, Safari 13.1+）。如果需要支持老旧浏览器，可以加降级方案：
<font face="monospace">
.example {
font-size: 1rem; /* 降级 */
font-size: max(1rem, 1.5vw);
}
</font>基本上就这些。max() 是个轻量级方法，适合想简单提升响应体验的场景，不复杂但容易忽略。
