min()和max()是css计算函数，需在css规则中使用，不能写在html属性里；其生效依赖显示上下文、父容器宽度、单位一致性及浏览器兼容性，且计算结果为静态，resize时重新解析。

min() 和 max() 是 CSS 计算函数，必须写在 CSS 规则里，不能塞进 HTML 标签属性中——<div min="100px"> 这种写法完全无效。<h3>为什么 <code>min() 写对了却没生效

最常被忽略的不是语法，而是计算上下文缺失：

• display: inline 元素上设 width: min(200px, 50%) 无效——行内元素不接受宽高，得先加 display: inline-block 或 display: block
• 父容器没设 width，或处于 display: flex 且未控制 flex-shrink: 0，子元素的百分比基准可能为 0，导致 min(50%, 300px) 实际取到 0px
• 用 rem 时，若用户缩放或根字体动态变化，min(1.5rem, 24px) 的比较基准会漂移；建议统一用 px 或 vw 配合视口单位
• 旧版 Chrome（≤98）对 min() 里嵌套 calc() 支持不稳定，例如 min(calc(100% - 20px), 600px)，可改用 clamp() 或预计算

min() 控制上限、max() 控制下限的典型场景

二者不是 min-width/max-width 的替代品，而是在属性解析阶段更早介入的动态计算：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• width: min(100vw, 800px)：小屏取 100vw（含滚动条宽度），大屏卡死在 800px；注意横向溢出风险，必要时加 overflow-x: hidden
• font-size: min(4rem, 8vw)：防大屏字号爆炸、小屏糊成一片
• line-height: max(1.4, 24px)：确保小屏下文字行高不至于过挤
• padding-inline: max(1rem, 5vw)：小屏用宽松的视口比例，大屏保底固定值

和 clamp()、minmax() 别混用

三者语义与使用位置完全不同：

• clamp(280px, 80vw, 400px) 等价于 max(280px, min(80vw, 400px))，适合区间锁定；但 Safari 15.4+ 才完整支持，旧版需拆解
• minmax(200px, 1fr) 是 Grid 轨道关键字，只能用于 grid-template-columns 或 grid-template-rows；写成 minmax(clamp(200px, 50vw, 800px), 1fr) 是非法的
• min() 和 max() 可用于任意支持长度/百分比的属性（width、font-size、padding 等），但不会自动响应尺寸变化——它们只在计算值阶段静态取舍，真正驱动弹性的是 vw、% 这类相对单位

真正容易被忽略的是：这些函数的计算结果是静态的，窗口 resize 后浏览器会重新解析并计算一次，但函数本身不监听变化。如果你依赖 vw，又在窄屏下发现布局错位，大概率是 100vw 包含了滚动条宽度——这时候该换 100dvw，或者手动补 overflow-x: hidden。