Medium正文宽度680px、行高1.58、段间距1.8em；图片用figure包裹并设img为block；导航无下划线，作者区留2.5em空白；字体栈必含serif，根字号18px，文字块左右各12px内边距。
直接用 HTML + CSS 仿 Medium 页面，核心不是“套外观”，而是抓住它三个不可见但决定体验的关键点：垂直节奏、文字呼吸感、交互反馈区。没做对这三点，哪怕用 font-family: "Charter", "Georgia", serif 也像贴纸。
怎么复刻 Medium 的正文阅读区宽度和行高
Medium 实际正文最大宽度是 680px，不是全屏；行高固定为 1.58（不是 1.5 或 1.6），且段落间有 1.8em 垂直间距 —— 这比单纯设 line-height 更关键。
- 别用
max-width: 100%或width: 80%，必须写死max-width: 680px，否则小屏会撑满，大屏又太窄 -
p标签不要只设line-height，要加margin-bottom: 1.8em，并确保margin-top: 0，避免段前空隙叠加 - 标题如
h1、h2需单独控制margin-top，Medium 的h2上边距是3em，下边距是1.2em，不是继承段落值
如何让图片居中且不破坏段落流
Medium 的图不是简单 text-align: center，而是用 figure 包裹 + display: block + 负外边距微调。尤其注意：图片默认带 inline 行内基线，会导致下方多出空白。
- 必须给
img加display: block，否则底部总有 4px 空白 - 用
figure而非div，语义正确，且方便后续加figcaption - 如果图宽超
680px，用max-width: 100%+height: auto，禁止设固定width，否则响应式失效
导航栏和文章头怎么做到“轻但可感知”
Medium 导航不抢戏，但存在感强：字体细、颜色浅（#777）、hover 变深（#333）、无下划线。文章头部的作者名/日期区域高度固定，且与正文有明确视觉断层。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
nav a别用text-decoration: underline，用border-bottom: 1px solid transparent+ hover 时变色，更柔和 - 作者信息区域建议用
flex布局，align-items: center，避免用vertical-align徒增复杂度 - 文章头（title + meta）和第一段之间留足
margin-bottom: 2.5em，这是 Medium 最明显的“呼吸停顿”
为什么你加了字体还是不像？缺了这个细节
Medium 用的是系统字体栈："Charter", "Georgia", "Cambria", "Times New Roman", serif，但真正起作用的是最后那个 serif 回退 —— 它让 Safari 和 Chrome 在不同系统上渲染一致。很多人只抄前面，漏掉 serif，结果在 Windows 上变成丑陋的 Times。
- 必须写全栈，顺序不能错；
serif是兜底项，不可省略 - 字号用
rem，根元素设font-size: 18px（Medium 实际基准），而不是16px，否则所有尺寸都偏小 - 禁用
user-select: none类样式，Medium 允许选中文本，这是阅读友好性的基本信号
最易被忽略的是：Medium 所有文字块左右都有约 12px 内边距（padding-left/padding-right），不是靠外层容器居中撑开的。少了这个，再准的字体和行高，看起来也“贴边”，缺乏精致感。
