移动端标题优化需协同调整字号、字间距与断行策略：≥768px用24–28px，480–767px缩至20–22px，≤479px用18–19px并增行高至1.3–1.4；配letter-spacing:0.02em提升小字易读性；中文标题用overflow-wrap:break-word，英文术语启hyphens:auto，禁符号前断行；超长标题可响应式截断为两行加省略号。
长标题在移动端换行不自然，核心问题往往不是“要不要换行”，而是“在哪断、怎么断、看起来是否舒服”。单纯靠默认换行（word-break: normal）容易在单词中间硬切，或因字号过大、字间距过紧导致视觉拥挤、阅读断点错乱。解决关键在于：媒体查询中协同调整字体大小、行高、字间距，并辅以合理的换行控制策略。
用 media query 精准控制字号与缩放节奏
避免“一刀切”地把所有标题统一设为 16px。应按设备宽度阶梯式缩放，兼顾可读性与布局留白：
- ≥768px（平板）：标题用 24–28px，保留桌面端表现力
- 480px–767px（小屏手机横屏/大屏竖屏）：缩至 20–22px，避免占满屏幕
- ≤479px（主流手机竖屏）：进一步缩到 18–19px，同时适当增加 line-height（如 1.3–1.4）提升呼吸感
调整 letter-spacing 让小字号更清晰
字号变小后，字母挤在一起会加重识别负担，尤其对中文混排英文或品牌词时。轻微正向字间距能显著提升易读性：
- 18–19px 标题建议设置
letter-spacing: 0.02em或0.2px - 避免使用固定像素值（如 2px），优先用
em或rem保持缩放一致性 - 中文字体本身字面率高，一般不需负字距；仅在极窄容器内、全大写英文标题中可微调至 -0.01em
用 word-break 和 white-space 引导合理断行
移动端标题常含中英文混合、长产品名或带连字符的术语，需主动干预断行逻辑：
立即学习“前端免费学习笔记（深入）”；
- 中文为主标题：保持
word-break: normal（默认），配合overflow-wrap: break-word允许长英文/数字串在合适位置折行 - 含英文术语（如 “UltraHD-Display-Technology”）：加
hyphens: auto（注意 Safari 需-webkit-hyphens）并确保语言属性lang="zh"或lang="en"正确 - 禁止在符号前断行（如 “¥1999”、“v2.3.1”）：用零宽空格
或 CSSunicode-bidi: plaintext辅助控制
必要时用 text-overflow + 响应式截断+省略号
当标题实在过长且语义允许精简（如列表项、卡片标题），比强行换三行更优雅：
- 限制最大行数：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - 搭配
text-overflow: ellipsis仅适用于单行；多行需上述 -webkit-box 方案（iOS/Android 主流浏览器均支持） - 注意：截断前先保证字号已响应式缩小，否则小屏下可能一行都容不下就直接省略
基本上就这些。不复杂但容易忽略——字号、字距、断行是三位一体的微调，改一个常要联动另两个。实际调试时，打开 Chrome DevTools 的 device toolbar，从 iPhone SE 尺寸开始往大拉，边看边调，比纯猜效果可靠得多。
