min()和max()是CSS计算函数，用于在属性解析阶段动态取值但结果静态；width: min(50%,800px)取0px常因display或父容器宽度缺失导致百分比基准为0，应避免单位混搭并优先用100vw而非100%确保视口适配。
min() 和 max() 是 CSS 计算函数，不是 HTML 属性，也不能替代 min-width/max-width；它们在属性解析阶段动态取值，但结果是静态的——窗口缩放时会重算，函数本身不监听变化。
为什么 width: min(50%, 800px) 有时取到 0px
这不是函数写错了，而是计算上下文缺失导致百分比基准为 0：
-
display: inline元素上设width无效，必须先加display: inline-block或block - 父容器没设
width，或处于display: flex且未控制flex-shrink: 0，子元素的50%就无参照可依 - Flex 子项默认带
min-width: auto，会锁死原始尺寸，覆盖min()的计算结果 - 用
rem时若根字体被用户缩放或 JS 动态修改，min(1.5rem, 24px)的比较基准会漂移，建议统一用px或vw
用 min() 控制上限：什么时候该写 100vw 而不是 100%
100% 是相对于父容器宽度，100vw 才真正对应视口宽度。混用会导致行为不可控：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
width: min(100%, 800px)：小屏下若父容器只有 400px，结果就是 400px，根本达不到“占满视口”的效果 -
width: min(100vw, 800px)：小屏取当前视口宽（如 375px），大屏卡死在 800px，这才是真正的流式上限 -
100vw包含滚动条宽度，可能造成横向溢出；若需精确视口，优先用100dvw（支持情况下），否则补overflow-x: hidden - 慎用单位混搭如
min(200px, 50%)——不同上下文中 50% 可能是 0、200px 或其他值，调试困难，建议改用clamp()或统一单位
max() 单独使用比 clamp() 更合适的情况
当只需要保底、不需要“首选值”时，max() 更轻量、语义更准，且兼容性更好（Safari 15.2+ 支持，而 clamp() 要 15.4+）：
立即学习“前端免费学习笔记（深入）”；
-
font-size: max(14px, 1.2vw)：确保小屏不糊，大屏可放大，无需中间弹性值 -
line-height: max(1.4, 24px)：防止小屏文字挤成一团，数值直给，无歧义 -
padding-inline: max(1rem, 5vw)：小屏宽松，大屏不空洞，比clamp(1rem, 5vw, 2rem)更简洁 - 旧版 Chrome（≤98）对
min(calc(...), ...)支持不稳定，此时max(14px, calc(12px + 0.5vw))比嵌套min()更可靠
真正容易被忽略的是：min() 和 max() 不驱动弹性，它们只是卡口；真正让尺寸随屏幕变化的是 vw、% 这类相对单位。函数只负责在那一刻选一个数，选完就静止了——别指望它自己“响应”变化。
