clamp()是首选响应式字号方案，支持min、ideal、max三值设定，如font-size: clamp(16px, 2.5vw, 32px)；16px保小屏可读，2.5vw实现平滑缩放，32px防大屏溢出，主流浏览器Firefox 75+、Chrome 88+、Safari 15.4+原生支持。
font-size: clamp() 是首选方案
现代浏览器下，clamp() 是最稳妥的响应式字号控制方式。它能同时设定最小值、理想值和最大值，避免小屏过小、大屏过大，且天然适配视口变化，无需媒体查询就能平滑缩放。
典型写法：font-size: clamp(16px, 2.5vw, 32px);
-
16px是底线——确保 iPhone SE（320px 宽）上 2.5vw ≈ 8px 时仍显示为 16px，可读不糊 -
2.5vw是弹性主体——在 768px 平板上约 19.2px，1440px 桌面约 36px，视觉节奏自然 -
32px是上限——防止超宽屏（如 4K）下字号失控撑破布局 - 注意：Firefox 75+、Chrome 88+、Safari 15.4+ 均原生支持；旧版 Safari（-webkit-clamp() 前缀（但实际极少需要）
max() 函数适合单行强约束场景
当元素必须保持单行（比如带打字动画的 banner 标题），且要严防窄屏下文字被裁切或出现横向滚动条，max() 比 clamp() 更直接。
写法示例：font-size: max(18px, 4vw);
立即学习“前端免费学习笔记（深入）”；
- 在 375px 屏幕（iPhone）上，4vw ≈ 15px → 实际取
18px，保障清晰度 - 在 1200px 屏幕上，4vw = 48px → 字号自动放大，增强视觉权重
- 必须配合
white-space: nowrap和overflow-x: hidden，否则max()再大也挡不住换行或溢出 - 不支持 IE 和 Safari font-size: 20px; font-size: max(18px, 4vw);
text-overflow: ellipsis 不是字号方案，但常被误用
很多人想靠 text-overflow: ellipsis “解决溢出”，但它根本不管字号大小，只管“溢出后怎么显示”。如果字体太大导致单字就撑满容器，加了也没用。
- 生效前提缺一不可：
width或max-width+white-space: nowrap+overflow: hidden - Flex 子项常失效：因为默认
min-width: auto，得额外加min-width: 0或overflow: hidden - 遇到长 URL 或 token（如
abc123def456），即使满足三条件，浏览器也不换行 → 此时需补word-break: break-all或overflow-wrap: break-word
小屏文字仍溢出？大概率是容器没控宽
再好的字号函数也救不了父容器失控。常见漏点：
- 卡片或 flex 项未设
max-width，导致4vw在大屏下算出超大值，而容器本身又没限制宽度 - 用了
white-space: nowrap却忘了给父容器加overflow-x: hidden，结果窄屏出现滚动条或内容切边 - padding 或 border 没计入
box-sizing，实际内容区比预想窄 → 建议统一加box-sizing: border-box - 媒体查询里重写了
font-size，但没覆盖所有断点，比如漏了@media (max-width: 480px)
真正卡住的往往不是函数选错，而是容器尺寸链上某一处没显式约束——从 html 到最内层文字，每一层都要问一句：“它的宽度到底由谁决定？”
