min()和max()控制计算后尺寸而非viewport缩放，用于设定元素尺寸边界；width: min(100%, 800px)在移动端常因父容器宽度不确定而失效，应改用100vw；需注意单位一致性、嵌套顺序及浏览器兼容性。
不能直接限制“缩放”，min() 和 max() 控制的是计算后的尺寸值，不是 viewport 缩放行为本身。 它们能做的，是让元素在用户缩放或视口变化后，仍保持你设定的尺寸边界——比如图片不被拉宽撑破屏幕，字号不因缩放变到不可读。
为什么 width: min(100%, 800px) 在移动端常失效
这个写法看似合理，实际依赖父容器宽度，不是视口。当父容器是 display: flex 且未设 flex-shrink: 0，或者嵌套在未设宽的祖先里，100% 可能算出 0 或远小于预期；小屏下反而固定成 800px，直接溢出。
- 真正该用
100vw：它基于视口宽度，不受父级干扰，如width: min(100vw, 768px) -
100vw包含滚动条宽度，iOS Safari 可能导致横向滚动条闪现，可加overflow-x: hidden或改用100dvw（若支持） - 百分比单位在
inline元素上无效，必须先设display: block或inline-block
用 max() 防止小屏下内容过小（比如字体、行高）
用户双指缩放时，rem 或 em 会随根字体变化，但 max() 能兜底最小可读尺寸。注意：它比较的是计算值，不是缩放比例。
-
font-size: max(16px, 2.5vw)—— 小屏时2.5vw可能低于 16px，此时取 16px；大屏则随视口增长 - 慎用
max(1rem, 16px)：如果用户缩放导致1rem = 20px，那它就永远取不到 16px；统一用px或vw更可控 -
line-height: max(1.4, 22px)比纯无单位值更可靠，避免极端缩放下文字挤成一团
嵌套使用 min/max 模拟 clamp() 以兼容旧 Safari
Safari 15.2+ 支持 min()/max()，但 clamp() 要到 15.4+ 才完整支持。老项目需手动组合：
font-size: max(16px, min(4vw, 24px));
这等价于 clamp(16px, 4vw, 24px)，但要注意顺序：外层 max() 保下限，内层 min() 卡上限。
- 别写反成
min(max(...))，浏览器可能忽略或计算错误 - 避免三层以上嵌套，如
min(max(320px, 20vw), 800px, 90vw)，可读性差且部分 Android WebView 会退化 - 所有参数单位要能被浏览器统一解析，
min(1rem, 100%, 400px)是合法的，但min(100, 400px)会整个失效
最易被忽略的一点：这些函数只在样式计算时求值，不监听用户缩放事件。如果你依赖 pinch-zoom 后的实时重排，仍需 JS 监听 resize 或 orientationchange 补充处理——min/max 解决的是布局层面的静态边界，不是交互层面的动态响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
