用 clamp() 控制单个网格项字体大小最常用且可控，即 font-size: clamp(1rem, 2.5vw, 1.5rem)，确保小屏不缩小、大屏不撑爆、中屏线性过渡；需依列数调整参数，避免套在容器上或误用 em；配合 overflow-wrap、white-space 等防止溢出；兼容性差时用双声明降级。
用 clamp() 控制单个网格项的字体大小
直接在网格子元素上设 font-size: clamp(1rem, 2.5vw, 1.5rem); 最常用也最可控。它让字体在小屏下不缩太小（1rem 下限），大屏下不撑爆容器（1.5rem 上限），中间用视口宽度线性过渡（2.5vw）。注意：这个值不是写死的，得根据你的网格列数和内容密度调——比如 4 列网格比 2 列更挤，clamp() 的上限就得压低一点，否则小屏下文字换行或溢出。
常见错误是把 clamp() 套在网格容器（grid 父元素）上，结果所有子项字体被统一拉伸，失去响应粒度；还有人误用 em 当基准，导致嵌套时尺寸失控，一律用 rem 或 vw 这类根相关单位。
Grid 布局中列数随屏幕变化但字体保持协调
靠 grid-template-columns 配合 minmax() + auto-fit 动态列数，再让字体大小与列宽联动。关键点是：字体不能只看视口宽，还得参考每列实际宽度。简单做法是用 clamp() 的中间值绑定 1fr 的计算结果——但 CSS 不支持直接算 1fr，所以退而求其次：用 clamp(1rem, 4vw, 1.375rem) 这类值，其中 4vw 对应 3 列布局下的单列均分宽度（≈33.3vw × 0.12），经验值需要调试。
- 2 列布局（桌面）：推荐
clamp(1rem, 3.8vw, 1.5rem) - 3 列布局（平板）：用
clamp(1rem, 3.2vw, 1.375rem) - 4+ 列（大屏）：上限降到
1.25rem，避免字太密
移动端文字被截断或换行异常
问题常出在没限制网格项内文本块的弹性行为。即使字体响应了，div 容器若没设 overflow: hidden 或 white-space: normal，长单词或链接仍会撑破网格项。尤其英文无空格字符串（如 API key、base64 片段）极易触发。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给网格子项加
overflow-wrap: break-word; - 禁用强制不换行：
white-space: normal;（别留nowrap） - 如果用
display: grid的子项里还套了flex，检查flex-shrink是否为 0 —— 这会让字体缩小时容器拒绝收缩，文字被裁
旧浏览器兼容性兜底方案
clamp() 在 Safari 13.4+、Chrome 88+、Firefox 79+ 才稳定支持。iOS 13.4 以下（尤其微信内置浏览器）会直接忽略该声明，回退到初始 font-size 值。不能只靠 @supports 检测，因为部分安卓 WebView 声称支持 clamp() 却解析错中间值。
稳妥做法是双声明：
font-size: 1.125rem; font-size: clamp(1rem, 3.4vw, 1.375rem);
前面那行是降级值，选一个在多数小屏下可读又不占地方的固定尺寸（比如 1.125rem ≈ 18px）。别用 16px 这种绝对值，它绕过用户系统字号设置，对无障碍不友好。
真正难处理的是字体大小和 grid-gap 的协同——gap 一般用 rem 或 px，但字体缩小时 gap 不变，视觉节奏就乱。目前没纯 CSS 解法，只能接受这点不完美，或者用 JS 监听 resize 动态改 --gap 自定义属性。
