min()和max()在字体中需单位统一或改用clamp()：font-size: clamp(16px, 4vw, 24px)最可靠；若用min()，须避免混用px与vw，如min(16px, calc(100vw / 25))，且需确保rem基准可控。
min() 和 max() 在字体大小里怎么写才生效
直接写 font-size: min(16px, 2vw) 是无效的——CSS 要求 min() 和 max() 的每个参数必须是**同类型可比较的值**，而 16px 和 2vw 虽然都是长度，但浏览器早期实现（尤其 Safari 15.4 之前）对混合单位支持不一致，容易被忽略或降级为 initial。真正可靠的做法是统一用视口单位或借助 clamp() 补位。
实操建议：
- 优先用
clamp(16px, 4vw, 24px)替代单纯min/max，它本质是max(minimum, min(preferred, maximum))，语义清晰且兼容性好（Chrome 88+、Firefox 79+、Safari 13.1+） - 如果坚持用
min()，确保所有参数单位一致：比如min(16px, calc(100vw / 25))，其中calc(100vw / 25)计算结果仍是px值，避免混用vw和px - 注意 Safari 对
min()嵌套calc()的解析 bug：不要写min(calc(1rem + 1vw), 24px)，改用clamp()或提前计算好基准值
为什么 font-size: min(1rem, 4vw) 在小屏上没变小
常见现象：在手机上字体依然很大，甚至溢出容器。根本原因是 1rem 默认等于根元素（）的字号，而多数项目没重设 html { font-size: 100% }，导致 1rem ≈ 16px 远小于 4vw（例如 iPhone 14 的 4vw ≈ 19px），于是 min(1rem, 4vw) 恒为 1rem，失去响应效果。
解决路径：
- 显式设置根字号：比如
html { font-size: 16px }，再用min(16px, 4vw)，让两个参数有实际比较意义 - 或者改用相对基准：如
min(1.25rem, 4vw)（假设你希望最小为 20px），前提是确保rem基准可控 - 检查是否被其他 CSS 覆盖：用浏览器开发者工具看 computed 样式里
font-size是否真被应用，还是被!important或更高优先级规则覆盖
max() 在字体大小中有什么实用场景
max() 单独用于字体并不常见，但它在“保底大字号”时很关键——比如防止用户缩放页面后文字过小，或适配高 DPI 屏幕。典型错误是直接写 font-size: max(16px, 1.2em)，这会导致 em 相对于父元素计算，嵌套时行为不可控。
安全用法：
- 只和绝对单位或视口单位搭配：
font-size: max(16px, 2.5vw)，确保下限明确 - 配合媒体查询做分段控制：比如桌面端用
max(18px, 1.125rem)，移动端切到clamp(14px, 4vw, 18px)，避免单靠max()在窄屏失控 - 注意 Chrome 对
max()中百分比的支持问题：不要用max(16px, 100%)，%在字体上下文中会参考父元素行高而非字号，结果难预测
兼容性与 fallback 怎么写才不炸锅
IE 完全不支持 min()/max()/clamp()，即使现代浏览器，旧版 Safari（
必须手动 fallback：
- 用层叠顺序：先写老语法，再覆盖新语法，例如
font-size: 16px;<br>font-size: clamp(16px, 4vw, 24px);
浏览器会忽略不认识的clamp()，保留前一行 - 避免在同一个声明里混用：不要写
font-size: 16px, clamp(16px, 4vw, 24px)，逗号是语法错误 - 服务端或构建时注入：如果项目用 PostCSS，可用
postcss-clamp插件自动补max(min(...))等等，但要注意生成的 CSS 在 Safari 15.4 前仍可能失效，不如直接用clamp()+ 简单 fallback 稳定
最易被忽略的一点：viewport meta 标签必须存在且正确，否则 vw 单位在移动端会按桌面宽度计算，所有基于 vw 的 min/max/clamp 全部错乱。检查是否漏了 <meta name="viewport" content="width=device-width, initial-scale=1">。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
