使用相对单位和媒体查询实现文字自适应，核心是采用vw、rem结合clamp()函数与断点控制，通过视口单位缩放字体、根字体调整全局比例，并用媒体查询精细优化各设备显示效果。
响应式页面中让文字大小随屏幕尺寸变化，核心是使用相对单位和媒体查询。直接用固定像素（px）设置字体，在不同设备上体验差，应该采用更灵活的方式。
使用视口单位（vw、vh）
视口单位基于屏幕宽度或高度，能让字体自然缩放。1vw 等于视口宽度的 1%，适合标题等需要强适应的文本。
示例：
body {
font-size: 2vw;
}
h1 {
font-size: 5vw;
}
注意：小屏下可能太小，大屏下可能太大，可配合最小最大值限制：
立即学习“前端免费学习笔记（深入）”；
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
clamp() 函数设定最小、推荐、最大值，兼顾可读性与自适应。
结合 rem 与根元素动态调整
rem 单位基于 html 根元素的字体大小。通过媒体查询改变根字体，全局文字按比例变化。
示例：
html {
font-size: 16px;
}
@media (max-width: 768px) {
html { font-size: 14px; }
}
@media (min-width: 1200px) {
html { font-size: 18px; }
}
p {
font-size: 1rem;
}
h2 {
font-size: 2rem;
}
这样所有 rem 字体都会随根字体调整而缩放，保持整体协调。
使用媒体查询单独控制关键文本
对特定元素在不同断点设置不同字体大小，精准控制显示效果。
示例：
.title {
font-size: 24px;
}
@media (max-width: 768px) {
.title { font-size: 18px; }
}
@media (min-width: 1024px) {
.title { font-size: 32px; }
}
适合导航、按钮、段落等需要精细适配的场景。
实用建议
不要只依赖一种方式。实际项目中可组合使用：
- 正文用 rem，配合根字体调整
- 大标题用 clamp + vw，实现流畅缩放
- 特殊组件用媒体查询微调
测试时覆盖常见设备宽度，确保小屏不挤、大屏不空。基本上就这些，不复杂但容易忽略细节。