核心是用vw实现等比缩放并守住可读底线：基础写法font-size: 4.5vw，推荐font-size: max(20px, 4.5vw)兜底最小字号，配合white-space: nowrap、padding响应式设置及overflow-x: hidden保障稳定性。
用视口宽度单位（vw）做流式标题，核心是让字体大小随屏幕宽度等比缩放，同时守住可读底线——不能太小看不清，也不能太大撑破容器。
基础写法：font-size: 4.5vw
这是最直接的流式起点。1vw = 视口宽度的1%，所以 4.5vw 在 1000px 宽度下是 45px，在 400px 下就变成 18px。优点是平滑缩放；缺点是小屏下容易过小（比如 iPhone SE 上仅约 17px），影响阅读。
- 适合中大屏主导的场景，如横幅标题、全屏展示页
- 需配合
white-space: nowrap防止换行破坏设计节奏 - 建议加
max-width: 90%和margin: 0 auto居中，避免边缘紧贴
更稳妥方案：用 max() 设定最小字号
推荐写法：font-size: max(20px, 4.5vw)。CSS 的 max() 函数会取两个值中的较大者，既保留 vw 的弹性，又兜底保障最小可读尺寸。
- 在 375px 宽手机上：4.5vw ≈ 16.9px → 实际采用 20px
- 在 1440px 宽桌面端：4.5vw ≈ 64.8px → 自动放大，视觉更突出
- 比
calc(45px + 2vw)更直观可控，避免小屏“假大实小”问题
配合定位与留白提升稳定性
光调字体还不够，容器和排版也要同步响应。
- 水平居中用
text-align: center+margin: 0 auto，别依赖绝对定位 - 内边距用
padding: 2vh 4vw，让文字呼吸空间也随视口变化 - 禁用水平滚动：
overflow-x: hidden，而不是auto，避免意外拖拽破坏体验 - 若文字仍溢出，微调 vw 系数（如从 4.5vw 降到 4.2vw）或增加左右 padding
进阶提示：避免常见陷阱
不是所有地方都适合纯 vw 标题。
- 多行标题慎用 vw：行高、字间距需同步响应，否则易出现断行错位
- 嵌套在窄容器（如侧边栏卡片）里的标题，媒体查询或容器查询可能比 vw 更精准
- 避免和 rem/em 混用导致层级混乱；vw 是绝对视口参照，不继承父级字体设置
- 动画中依赖 width 变化的（如打字效果），要确保父容器有明确宽度（
display: block或inline-block）
