移动端标题需清晰可读、层级分明、不挤占空间，核心是控制字号（用clamp等相对单位）、行高（1.2–1.3）、留白（margin-bottom≥1rem）及响应式行为，保持语义结构（h1唯一、h2/h3逻辑嵌套），长标题须截断并提供完整文本提示。
标题标签在移动端小屏幕下要清晰可读、层级分明、不挤占空间，核心是控制字号、行高、留白和响应式行为，而非单纯套用
到。
字号与缩放需适配视口
字号与缩放需适配视口
移动端默认字体较小，直接继承PC端的标题样式容易过小或溢出。建议用相对单位（rem 或 clamp）替代固定px值：
- 使用 clamp(1.5rem, 4vw, 2.25rem) 让h1在小屏自动缩放，兼顾可读性与空间控制
- 避免设置 font-size: 24px 这类绝对值，否则在iPhone SE等小屏上可能占满整行甚至换行错乱
- 配合 viewport meta 设置：
行高与上下边距要“呼吸感”充足
小屏垂直空间紧张，标题若行高太小、上下margin太窄，会显得压迫、难定位。关键调整点：
- h1–h3 的 line-height 建议设为 1.2–1.3，避免文字贴顶贴底
- 标题后 margin-bottom 至少保留 1rem（约16px），确保下方内容有视觉分隔
- 慎用 margin-top：移动端从上往下阅读，顶部留白靠父容器控制更稳妥
结构语义不能为适配让步
有人为“省空间”把h2改成div加class，这是错误优化。搜索引擎和读屏工具依赖真实标题层级：
- 保持 h1 只出现一次，代表页面核心主题（如文章标题、产品名）
- h2/h3 按逻辑嵌套，不跳级（如h1后直接h3）、不倒置（h2不能出现在h1之前）
- 用CSS隐藏冗余文字（如“.sr-only”辅助类），而非删减语义标签
长标题需截断与提示机制
移动端一行显示字符有限，超长标题易折行混乱或遮挡按钮。实用处理方式：
- CSS单行截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
- 配合 title 属性保留完整文本，用户长按可查看（iOS/Android均支持）
- 对关键页面（如新闻详情页），优先精简标题字数，控制在12–16个汉字内效果更稳
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
