直接用font-size: clamp(16px, 4vw, 32px)可实现安全平滑的响应式字体缩放，但须确保min≤偏好值≤max逻辑自洽，否则小屏反大、大屏锁死；推荐全用px或全用rem避免混用；vw按视口宽计算，窄区域需改用rem/em或container-query；旧版浏览器需加font-size降级；line-height应始终用无单位值联动缩放。
直接用 font-size: clamp(16px, 4vw, 32px) 就能实现安全、平滑的响应式字体缩放，无需媒体查询，但必须确保三个参数逻辑自洽——否则小屏反而更大、大屏被锁死。
clamp() 三个参数怎么填才不翻车
很多人抄了示例却在 iPhone SE 上看到 10px 字体，问题出在第二项（偏好值）和上下限的数值关系没对齐。
-
clamp()不是“取中间”，而是“在 min 和 max 之间线性插值”，插值依据是视口宽度；如果4vw在 320px 宽度下算出来是12.8px，而你设了min: 16px，那浏览器就直接取16px——这没问题；但如果写成clamp(14px, 1rem, 18px)，而1rem = 20px（用户放大了系统字号），中间项就比上限还大，结果永远取18px，失去响应意义 - 推荐组合：全部用
px（最可控），或全部用rem（适配系统字号），避免混用；例如clamp(1rem, 2.5vw, 2rem)，前提是html { font-size: 16px } - 测试关键点：把浏览器窗口拉到 320px、768px、1920px，分别看计算值是否落在区间内——用开发者工具的 Computed 面板直接查最终生效的
font-size
vw 单位为什么在侧边栏里字特别大
vw 永远按整个视口宽度算，不是按父容器。一个 200px 宽的 sidebar 里写 font-size: 4vw，在 1920px 屏幕上就是 76.8px，比主内容区还夸张。
- 遇到窄区域（如导航菜单、卡片标题、弹窗按钮），改用
rem或em+ 媒体查询兜底，比如font-size: clamp(0.875rem, 1.2rem, 1.125rem) - 如果非要保留流体感，可配合
container-query（需现代浏览器支持）：@container (width > 300px) { h3 { font-size: clamp(1.125rem, 2.2vw, 1.5rem); } } - 绝对不要在
table单元格或flex子项里无脑套4vw——先测真实渲染宽度，再反推合理vw系数
旧版 Safari 和部分安卓 WebView 怎么兼容
clamp() 在 Safari 13.4+、Chrome 88+、Firefox 79+ 原生支持，但 iOS 13.3 及更早版本、部分国产安卓浏览器仍会忽略整条声明，退回到浏览器默认字号。
- 必须加降级：先写固定值，再覆盖
clamp()，CSS 会自然忽略不支持的语法p { font-size: 16px; font-size: clamp(14px, 2vw, 20px); } - 不用试图用
@supports (font-size: clamp(0, 0, 0))包裹——它在不支持的环境里整个块都不生效，反而没降级 - 如果项目必须支持 iOS 12，老老实实用两档媒体查询：
@media (max-width: 480px) { p { font-size: 14px; } } @media (min-width: 481px) { p { font-size: 16px; } }
line-height 怎么跟着 font-size 一起动
行高不联动，小屏字变小后行距会糊成一团，大屏字撑开后又留大片空白——这不是 clamp() 的问题，是没配对设置。
- 永远用无单位数值：
line-height: 1.5，它会自动乘以当前font-size计算，比line-height: 24px或line-height: 1.5em更可靠 - 标题和正文行高策略不同：
h1适合line-height: 1.1（压紧行距突出字号），p推荐line-height: 1.6（保证可读性） - 如果用了 CSS 变量控制根字号（如
--font-base: 16px），记得line-height仍要无单位——它不读变量，只读实时计算出的font-size
真正容易被忽略的是：clamp() 的「偏好值」不是随便估的，它得在典型断点上产出合理字号。比如你想让 768px 平板上正文是 18px，那就解方程 x * 768 / 100 = 18 → x ≈ 2.34，所以写 clamp(16px, 2.34vw, 22px) 比拍脑袋写 3vw 稳定得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
