先记住这个答案
只用 vw 定字号,窗口变窄时字会一直缩,用户调整默认字号也未必得到预期结果。clamp(下限, 流体值, 上限) 可以截住两端,在流体值中加入 rem,让字号还与用户设置发生联系。写完仍要放大页面、增大系统文字并检查换行;公式合理不等于实际可读。
- 纯
vw不跟随根字号 clamp()给字号上下限- 首选值可混入
rem - 放大文字后仍要检查溢出
大标题在窄屏变得太小
大标题写 font-size: 4vw,在 320px 宽手机上只有约 12.8px,明显太小;在超宽显示器上又可能压过正文。把它改成 clamp(1.5rem, 1rem + 2vw, 3rem),至少保住最小字号,并限制最大值。这个公式也不是自动合规:用户把文字放大后,仍要检查标题是否截断、按钮是否装得下、页面是否出现无谓横向滚动。
.heading {
font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
line-height: 1.2;
overflow-wrap: anywhere;
}
/* rem 保留与根字号的联系,vw 提供流体变化 */vw 根据视口尺寸求值,和用户设置的根字号没有直接比例关系。
字号既要流动也要可读
rem 根据根元素计算字号求值;把它纳入首选值及边界,可以提高对文字放大设置的响应。clamp(min, preferred, max) 会将首选值夹在上下限之间,但固定的上下限也要按可读性选取。可访问性验收还需看放大后是否丢失内容和功能,不能只因为用了 clamp() 就判定通过。
可以从 clamp(1rem, 0.75rem + 1vw, 1.5rem) 这类结构理解三个位置:左边保证最小可读字号,中间随宽度缓慢增长,右边限制大屏不会无限放大。但具体数字仍要看字体、语言和容器宽度;中文长标题与英文长单词的换行表现不同。测试时先把文字放大,再检查按钮是否容得下,而不只是看字号计算值。
字号并非只在视口宽度变化时才需要适配。用户使用浏览器缩放、操作系统文字放大,或者组件被放进窄侧栏时,单纯按 vw 算出的字号可能与实际容器脱节。若标题排版受组件空间影响很大,可考虑容器查询和容器单位,但同样要有下限、上限以及没有查询容器时的回退,不能只把 vw 换成 cqw。
容易答错的地方
- 把
clamp()当成自动可访问 - 公式的下限、上限和缩放表现仍要人工检查。
- 只在默认字号下看屏幕截图
- 用户可能放大文字或缩放浏览器,布局必须仍可阅读和操作。
面试官还会怎么问?
为什么首选值里要有 rem?
它让部分字号变化跟随根字号,而不是全部只看视口宽度。
vw 什么时候适合字号?
适合有限范围内的展示性大标题,并配合可读的上下限和缩放测试。
文字放大后标题换行怎么办?
允许合理换行和容器增长,避免固定高度裁掉文字。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。