min()和max()是CSS计算函数，需在CSS规则中使用，不能写在HTML属性里；其生效依赖显示上下文、父容器宽度、单位一致性及浏览器兼容性，且计算结果为静态，resize时重新解析。
min() 和 max() 是 CSS 计算函数，必须写在 CSS 规则里，不能塞进 HTML 标签属性中——<div min="100px"> 这种写法完全无效。
为什么 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 的替代品，而是在属性解析阶段更早介入的动态计算：
-
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。
