使用vw单位可实现响应式字体，1vw等于视口宽度的1%，结合clamp()函数可限制字体大小范围，如font-size: clamp(1.5rem, 4vw, 3rem)，避免极端显示问题。
在css中，vw（viewport width）单位可以根据视口宽度动态调整字体大小，从而实现响应式字体效果。1vw 等于视口宽度的1%，比如视口宽为1000px时，1vw 就等于10px。
使用 vw 设置响应式字体
直接将字体大小设置为 vw 单位即可让文字随屏幕宽度变化：
h1 { font-size: 5vw; /* 字体大小为视口宽度的5% */ }
这样，当用户在手机上浏览时，视口较窄，字体自动变小；在大屏幕上则放大，保持视觉比例协调。
结合 min-size 和 max-size 避免极端情况
纯用 vw 可能导致字体在极小或极大屏幕上过小或过大，可通过 clamp() 函数控制范围：
立即学习“前端免费学习笔记（深入）”；
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
这段代码表示字体最小为 1.5rem，最大为 3rem，理想状态为 4vw，浏览器会根据视口自动选择合适值。
配合 rem 提升可维护性与可访问性
为了兼顾用户缩放偏好，可以以 rem 为基础，再结合 vw 调整：
html { font-size: 16px; } <p>.title { font-size: 2rem; /<em> 基础大小 </em>/ font-size: calc(1.5rem + 2vw); /<em> 动态扩展 </em>/ }</p>
这种混合写法让字体在不同设备上有良好表现，同时保留一定的弹性。
基本上就这些。合理使用 vw 能有效提升页面的响应式体验，关键是控制好范围，避免文字失衡。