使用视口单位和clamp()函数可实现响应式字体，如font-size: clamp(1rem, 2.5vw, 2.5rem)，使文字在不同屏幕平滑适配，兼顾可读性与响应性。
响应式字体大小可以让文字在不同屏幕尺寸下自动调整，提升用户体验。实现方式主要依赖css中的相对单位和媒体查询。
使用视口单位（vw, vh）
视口单位是相对于浏览器窗口大小的单位。1vw = 1% 的视口宽度，因此字体大小会随屏幕宽度变化而平滑调整。
示例：
font-size: 4vw; 表示字体大小为视口宽度的4%。屏幕越宽，字体越大。
优点：无需写多个断点，实现连续变化。但需注意极端尺寸下的可读性，建议设置最小值或结合 clamp() 函数。
立即学习“前端免费学习笔记（深入）”；
使用 clamp() 实现弹性字体
clamp() 是一个非常实用的函数，语法为：clamp(最小值, 理想值, 最大值)，适合创建“流体排版”。
常用示例：
font-size: clamp(1rem, 2.5vw, 2.5rem);
含义：字体最小为1rem，最大不超过2.5rem，中间范围按2.5vw动态缩放。这样既保证了响应性，又避免了过小或过大。
配合媒体查询精细控制
如果你需要在特定断点下调整字体，可以使用媒体查询。
例如：
@media (max-width: 600px) {
body { font-size: 14px; }
}
@media (min-width: 900px) {
body { font-size: 18px; }
}
这种方式更精确，适合对设计有严格要求的场景，但维护成本略高。
实际建议
推荐优先使用 clamp() 配合 rem 或 vw 单位，兼顾灵活性与可维护性。
- 标题可用 clamp(1.5rem, 4vw, 3.5rem)
- 正文可用 clamp(1rem, 2.2vw, 1.5rem)
- 避免只用 vw，防止小屏上文字太小看不清
基本上就这些。合理使用这些方法，字体就能自然适配各种设备。