用min()限制卡片宽度最可靠，因它取最小值天然适合作为上限；max()倾向撑大反而加剧放大问题；高度失控需用max-height、aspect-ratio、clamp()等组合策略。
直接结论：用 max-width 或 max() 限制卡片宽度，比单纯依赖 minmax() 更可靠；min() 是防放大的首选函数，max() 在这里基本不适用。
为什么 max() 不适合防放大？
max() 的作用是从多个值中取最大值，它天然倾向“撑大”，不是“设上限”。比如 width: max(300px, 50%)，在大屏下 50% 可能是 800px，结果就是 800px —— 这反而加剧了无限制放大问题。
常见错误现象：开发者误以为 max() 能像 max-width 一样起约束作用，结果卡片在平板横屏或桌面模拟器里宽到溢出容器、文字行过长、点击区域变形。
-
max()是计算函数，参与属性值求值，不提供边界保护 -
max-width是布局属性，浏览器在盒模型阶段强制截断，优先级更高 - 二者不能混用（如
width: max(100%, 600px); max-width: 600px;），后者会覆盖前者逻辑
min() 如何真正防止卡片放大
min() 才是控制“最大允许尺寸”的正确工具。它从多个候选值中挑最小的那个，天然适合作为上限开关。
典型用法：width: min(100%, 600px); 表示：取“父容器全宽”和“600px”中的较小者。小屏下用 100%，大屏下卡死在 600px。
- 可混合单位：
min(90vw, 720px, 100%)，三选一取最小，兼容性好（Chrome 79+、Safari 15.4+、Firefox 75+） - 搭配
box-sizing: border-box避免 padding/border 导致实际宽度超限 - 慎用
min(100vw, 600px)：100vw包含滚动条宽度，可能造成轻微溢出，推荐用100%或100dvw（需 dvh 回退）
卡片高度失控时该用哪个函数？
高度问题更隐蔽：图片拉伸、文字撑高、空白区域膨胀。此时 min() 对高度无效（height: min(...) 浏览器不支持），必须换策略。
正确做法是组合使用：
- 用
max-height+overflow-y: auto控制内容区（如卡片描述文本） - 用
aspect-ratio+object-fit约束图片区域，避免拉伸失真 - 对整体卡片设
min-height防止塌陷，但不用max-height全局限制 —— 它会截断内容，破坏可读性 - 需要流体高度时，改用
clamp()：height: clamp(200px, 60vh, 400px);（注意：vh在 iOS Safari 键盘弹出时会异常，建议加100dvh回退）
最易被忽略的一点：这些函数只解决尺寸计算，不解决内容溢出本身。如果卡片内有未设置 word-break 或 white-space 的长英文/数字串，min() 卡住宽度也没用——它照样撑破布局。防放大，从来不只是一个函数的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
