使用 clamp() 函数可实现响应式字体，如 font-size: clamp(16px, 4vw, 24px)，确保文字在不同屏幕下自然适配；结合媒体查询可精细控制各断点字体大小，适配手机、平板和桌面端；配合 rem 与根元素动态调整，能批量控制文本比例，提升维护效率。clamp() 简洁高效，适合现代项目，媒体查询则适用于高精度布局需求。
在不同屏幕尺寸下，CSS字体显示过大或过小会影响用户体验。为了解决这个问题，可以使用 clamp() 函数或结合 媒体查询（media queries） 来实现字体的动态适配，让文字在各种设备上都能自然呈现。
使用 clamp() 实现响应式字体
clamp() 是 CSS 中一个非常实用的函数，它允许你设置一个最小值、首选值和最大值，语法为：clamp(min, preferred, max)。浏览器会根据容器宽度自动计算合适的字体大小。
例如：
body {
font-size: clamp(16px, 4vw, 24px);
}
这段代码表示：字体最小为 16px，理想情况下随视口宽度变化（4vw），最大不超过 24px。这样既保证了可读性，又避免了在极小或极大屏幕上失衡。
立即学习“前端免费学习笔记（深入）”；
使用媒体查询精细控制字体大小
如果你需要更精确地控制不同断点下的字体表现，可以使用 媒体查询 分别设定规则。
/* 小屏幕手机 */
@media (max-width: 480px) {
body { font-size: 14px; }
h1 { font-size: 20px; }
}
<p>/<em> 平板 </em>/
@media (min-width: 481px) and (max-width: 768px) {
body { font-size: 16px; }
h1 { font-size: 24px; }
}</p><p>/<em> 桌面端 </em>/
@media (min-width: 769px) {
body { font-size: 18px; }
h1 { font-size: 32px; }
}</p>这种方式适合对设计还原度要求较高的项目，能针对特定设备做优化。
结合 rem 与根元素动态调整
配合 rem 单位和根字体大小调整，也能增强响应能力。通过修改 html 元素的字体大小，批量控制整个页面的文本比例。
html {
font-size: clamp(14px, 2.5vw, 18px);
}
<p>h1 {
font-size: 2rem; /<em> 对应 28px ~ 36px 动态范围 </em>/
}</p>这样所有使用 rem 的字体都会基于一个响应式的基准，减少重复设置。
基本上就这些。用 clamp() 更简洁高效，适合大多数现代项目；而 媒体查询 提供更强的控制力，适合复杂布局。根据项目需求选择合适方式即可。
