真正可读的文章页需控制视线移动成本：行宽≤65ch、行高1.5–1.6、段间距＞行高；标题用font-weight: 600+渐进字号+足够下边距；图片/引用/代码块须独立呼吸空间；移动端强制最小字号、适配窄列与触控区域。
如何让文章页文字真正可读，而不是“看起来像文章”
纯靠 font-size 和 line-height 调整不是排版，是凑数。真正可读的文章页，核心是控制「视线移动成本」：行宽不能太宽（否则眼跳吃力），行高不能太紧（否则行间粘连），段间距得比行高明显（否则段落不分）。
推荐直接用 max-width: 65ch 限定内容区宽度——ch 是字符单位，1 ch ≈ 当前字体中 “0” 的宽度，65 个字符是经过大量阅读研究验证的舒适上限。别用 px 或 % 硬设，那会随字体变化失效。
关键参数建议：
-
line-height: 1.6（正文）或1.5（衬线字体如 Georgia） -
margin-bottom: 1.8em（段落间距，必须大于line-height） -
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif（兼顾系统默认与可读性）
标题层级怎么不显得“突然跳出来”，又保持语义正确
浏览器默认的 h1～h6 尺寸梯度太大，尤其 h1 经常比正文大两倍以上，造成视觉断层。不要直接依赖默认样式，而是用 font-size + font-weight + margin 重新定义每级标题的节奏感。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 所有标题用
font-weight: 600（比bold更可控，避免某些字体加粗过重） -
h1到h2的尺寸差控制在1.2倍以内（例如h1: 1.8rem→h2: 1.5rem） - 标题下方留白必须大于其自身行高，比如
h2 { margin-bottom: 1.2em; }，否则和下一段文字“贴住” - 避免给
h1加margin-top，它应自然承接页面顶部，多余留白交给外层容器
图片、引用块、代码块这些“非文字元素”怎么不打断阅读流
它们本质是「视觉停顿点」，但默认样式常让它们变成「阅读路障」：图片没边距卡在段落里，引用块背景太满压迫文字，代码块字体太小或没内边距。
统一处理原则：所有块级插入元素，上下必须有独立呼吸空间，且不依赖段落自带的 margin。
- 图片：
img { display: block; margin: 1.5em auto; max-width: 100%; height: auto; }（强制居中、上下留白、响应式） - 引用块：
blockquote { border-left: 3px solid #e1e4e8; padding: 0.5em 1em; margin: 1.5em 0; font-style: italic; color: #586069; }（细边框比大背景更轻量） - 代码块：
pre { margin: 1.5em 0; padding: 1em; background: #f6f8fa; overflow-x: auto; }+code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.95em; }
移动端适配不是“加个 meta 标签就完事”
只是起点。真正在手机上读得舒服，要解决三个具体问题：小屏下字体不能缩得太小、窄列里行宽不能崩、触摸操作区域得够大。
必须写的媒体查询片段：
@media (max-width: 480px) {
body {
font-size: 16px; /* 强制最小字号，防 iOS 自动缩放 */
}
.article-content {
max-width: 100%;
padding: 0 1.2em;
}
h1 { font-size: 1.6rem; }
p, li { font-size: 1rem; line-height: 1.7; }
pre, blockquote, img { margin-left: 0; margin-right: 0; }
}注意：这里没用 rem 做响应式缩放，而是固定基础字号 + 微调比例。因为阅读场景下，用户需要稳定可预期的字号大小，而不是“越小越省空间”的错觉。
最易被忽略的一点：所有交互元素（比如回到顶部按钮、分享按钮）的点击区域高度至少 44px，否则拇指点不准——这和排版无关，但直接影响“能不能顺畅读完”。
