使用vw和vh单位可实现字体大小自适应，结合clamp()函数能避免极端尺寸，保持可读性；vh适用于全屏模块标题，配合rem与媒体查询更易维护，提升响应式体验。
在响应式网页设计中，字体大小的自适应是提升用户体验的关键一环。传统的固定单位（如 px）在不同设备上容易导致文字过小或溢出，而使用 CSS 相对单位，尤其是 vw 和 vh，可以让字体随视口尺寸动态调整，实现真正的流体排版。
理解 vw 和 vh 单位
vw（viewport width）和 vh（viewport height）是基于视口尺寸的相对单位：
- 1vw 等于视口宽度的 1%
- 1vh 等于视口高度的 1%
例如，在一个 375px 宽的手机屏幕上，1vw 就等于 3.75px。这意味着字体大小可以随着屏幕变大或变小自动缩放。
用 vw 实现字体自适应
将字体大小设置为 vw 单位，可让文字在不同设备上保持相对比例。比如：
立即学习“前端免费学习笔记（深入）”；
h1 { font-size: 5vw; }这样，h1 标题在手机上会较小，在桌面端则自动变大。但需要注意：纯 vw 设置可能导致极端屏幕下字体过小或过大。
解决方法是结合 min()、max() 或 clamp() 函数进行控制：
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
这段代码表示字体最小 1.5rem，最大 3rem，理想值为 4vw，兼顾了可读性与自适应。
vh 在特殊场景中的应用
vh 更适合用于全屏模块中的文字，比如首屏大标题或登录页提示语。例如：
.hero-title { font-size: 8vh; }当页面高度充足时，文字显得大气；在矮屏设备上也不会撑出滚动条。但需注意移动端浏览器地址栏收起会影响视口高度，实际显示可能略有偏差。
结合 rem 与媒体查询更灵活
虽然 vw/vh 很实用，但在复杂项目中建议结合 rem 和断点控制。例如：
html { font-size: 16px; }@media (max-width: 768px) {
html { font-size: 14px; }
}
h1 { font-size: 2.5rem; }
这种方案在关键断点调整根字体大小，再通过 rem 向下传递，结构清晰且易于维护。
基本上就这些。合理使用 vw、vh 配合现代 CSS 函数，能让字体真正“流动”起来，适配各种屏幕。关键是避免极端情况，保持文本可读性优先。
