min()和max()可在移动端替代部分js和媒体查询，但受限于计算时机、单位混用及浏览器兼容性；clamp()是其语法糖，更适用于响应式字号和间距。
直接说结论：min() 和 max() 在移动端能替代不少 JS 动态计算和媒体查询，但前提是理解它们的计算时机和限制——它们在 CSS 计算时求值，不响应视口缩放或字体大小变化，也不支持单位混用（比如 min(100vw, 500px) 可行，min(1rem, 100px) 在部分旧浏览器里会退化）。
什么时候该用 min() 而不是媒体查询？
当目标是“宽度不超过某个值，但也不能太小”时，min() 比写一堆 @media 更轻量。它在布局阶段实时计算，且可嵌套、可与 clamp() 配合。
- 典型场景：卡片最大宽度设为
min(90vw, 600px)，既避免窄屏溢出，又防止宽屏拉得太开 - 注意：
min()不会触发重排，但若依赖vh或vw，Safari 在地址栏收起/展开时可能不重算（iOS 16+ 已修复） - 别在
font-size上无脑套用min(1.2rem, 16px)——rem是相对根字体，px是绝对单位，Chrome 会计算，但 Firefox 可能忽略后者
max() 容易踩的单位陷阱
max() 常被用来兜底最小尺寸，比如防止文字在小屏上缩得太小，但它对单位兼容性更敏感。
- 错误写法：
font-size: max(14px, 0.875rem)—— 多数现代浏览器支持，但 Android WebView 4.4–6.0 直接忽略整条声明 - 安全写法：统一单位，如
font-size: max(14px, 14px)（没意义）或改用clamp(14px, 0.875rem, 16px) - 真正稳妥的兜底：用
max()处理容器尺寸，比如width: max(320px, 80%)，此时单位一致，兼容性好（Chrome 79+、Firefox 75+、Safari 13.1+）
和 clamp() 搭配使用的实际效果
clamp() 本质是 max(min(), ...) 的语法糖，但可读性更好；三参数结构让它更适合移动端响应式字号或间距。
- 例如：
padding-inline: clamp(12px, 5%, 24px)，比分别写min()+max()更直观 - 性能上无差别，但
clamp()在调试工具里显示为单个函数调用，而嵌套min(max(...))会多一层解析 - 注意 Safari 对
clamp()中百分比的支持较晚（13.1 才完整支持，iOS 13.4+），低于此版本会 fallback 到第一个值
真正难处理的不是函数本身，而是它和视口单位、root font size、缩放行为之间的耦合——比如用户双指放大页面时，vw 值不变，但实际渲染尺寸变大，这时 min(100vw, 400px) 的“400px”就可能突然显得太小。这类问题没法靠 CSS 函数单独解决，得结合 viewport 设置或 JS 监听 resize 补充调整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
