min() 和 max() 是 css 函数，用于设上限和下限，非逻辑运算符；仅支持同类型量纲比较，需锚定视口（如 100vw）才能实现流式响应，不支持混合类型或布尔表达式。
min() 和 max() 不是逻辑运算符，但能模拟“取大取小”逻辑
很多人看到 min() 就以为它像 JS 里的 Math.min() 那样做纯数值比较，其实它比较的是**计算后的 CSS 值**，且只在同类型量纲（如都是 <length></length>）下有效。它不支持布尔、字符串或混合类型，也不能直接写 min(a > b, c) 这类条件表达式。
真正起作用的，是把相对单位（vw、rem）和绝对单位（px）放一起，让浏览器在渲染时动态选一个更“安全”的值。比如：
font-size: min(4rem, 8vw); /* 小屏用 rem，大屏被 vw 拉高后，用 min 卡住上限 */
-
min()本质是“设上限”：适合控制最大尺寸（宽、高、字号、内边距） -
max()本质是“设下限”：防止缩得太小（如padding-inline: max(1rem, 5vw)） - 嵌套合法但易读性差：
min(100vw, max(320px, 50vw))是常见模式，但 Safari 15.2–15.3 会出错，得拆成两层变量或降级
为什么 width: min(100%, 768px) 往往失效
因为 100% 是相对于父容器宽度计算的，不是视口。如果父容器固定宽 500px，那 min(100%, 768px) 永远取 500px；如果父容器是 display: flex 下的弹性子项，100% 可能根本没意义。
真正流式的写法必须锚定视口：
width: min(100vw, 768px); /* ✅ 小屏取 vw，大屏卡死 768px */
-
100vw包含滚动条宽度，可能造成横向溢出 → 改用100dvw（Chrome/Firefox 支持，Safari 16.4+）或加overflow-x: hidden - 若需兼容 Safari 15.2–15.3，不能用
clamp()（需 15.4+），只能用max(min(), )组合，例如：width: max(320px, min(100vw, 768px)) - IE 完全不支持，现代项目可忽略；老项目需 fallback：
width: 768px; width: min(100vw, 768px);
用 max() + calc() 实现“最小字号 + 线性缩放”
设计师说“字号不能低于 14px，且在 320px–1920px 视口间线性变化”，clamp() 最直白，但若目标环境不支持（如旧版 Safari），就得绕路。
核心是用 calc() 构造斜线函数，再用 max() 截断底部：
font-size: max(14px, calc(12px + 0.12vw));
- 系数
0.12来自：目标区间跨度 (35px − 14px) ÷ 视口跨度 (1920 − 320) × 100 ≈ 0.013125 × 100 = 1.3125 → 但单位是px/vw，而vw是百分比单位，所以实际要写成0.12vw（需实测微调） - Chrome 110+ 支持
font-size: max(14px, 2.5vw)直接写，但 Safari 15.4–16.3 渲染有抖动，建议加transform: translateZ(0)强制 GPU 加速 -
calc()中+和-两边必须空格，*//可不空，但统一加空格更稳妥
clamp() 看似简洁，但三参数顺序容易记反
clamp(MIN, VAL, MAX) 的参数顺序是「下限、首选、上限」，不是「最小、中间、最大」的字面排序。写成 clamp(2rem, 4vw, 1rem) 会导致整个表达式无效（因为 MIN > MAX）。
更隐蔽的问题是：当 VAL 计算结果始终小于 MIN（比如 clamp(2rem, 1vw, 3rem) 在小屏下），浏览器会直接取 MIN，但你可能误以为是 VAL 没生效。
- 调试技巧：临时把
VAL换成固定值（如clamp(1rem, 20px, 3rem)），确认是否逻辑本身出错 - 不要在
clamp()里塞复杂嵌套，如clamp(max(1rem, 2vw), calc(...), ...)—— 多数浏览器会静默失败 - 若需多段响应逻辑（比如 320–768px 一种规则，768–1440px 另一种），
clamp()无能为力，必须配合媒体查询或 JS
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
