2019.11.29 更新：文章详阅读优化及设计释疑

优化更新

• 加宽了文章阅读区域的宽度，大屏幕下侧栏宽度固定为 300px，基于 Bootstrap Variable width Content
• 提高页面的加载速度，方法细节传送门 《我们悄悄优化了页面载入速度》
• 将撰写页面的预置标签从“按标签属性分组”改为“按开发领域分组”，使分组更有人群针对性
• 改进侧栏广告尺寸的兼容性（由于改版仍在进行，新老版本仍将持续一段时间）
• 新版详情页声望值简化处理

缺陷修复

• 修复举报后返回一串数字的问题
• 修复 Firefox 下 flex 的 auto 布局时，oveflow 失效导致换行的问题：flex 需要增加 min-width: 0 才行，参见 1 和 参见 2
• 修复编辑内容时，特殊符号 "、'、& 的转义问题
• 修复 markdown 表格表头对齐失效问题

FAQ

为什么文章宽度觉得有点窄？

虽然现在的屏幕越来越大，但从可用性角度来说，正文宽度 650~750px 仍然是理想的阅读可视范围。大家写代码的时候，通常也是推荐每行不超过 80 个字符的宽度。过宽会降低阅读时的专注力，过窄则造成跳跃频繁容易遗漏内容。所以，目前的文章正文宽度仍然控制在这个范围内。

为什么字体要调大？

字体从原有的 14px 增加到 16px，也是因为分辨率越来越高。2016 年起，大量的 13.3 寸笔记本默认分辨率都从 1280*800 提高到了 1440*900，从社区的 GA 的统计来看，前者用户占比已跌至不足 2%，后者是前者的 6 倍。在后者的分辨率下，14px 的字体阅读起来已经比较吃力了。所以这是适应终端设备的合理变化。

为什么用卡片式设计？

SegmentFault 从创立至今，已经有非常多的内容形态。想整合这些内容形态，采用纯栅格的设计让排版变得复杂，开发的工作量也急剧上升。

卡片式设计在栅格的基础上，让不同的内容类型以卡片形式包容，带来视觉上的一致性。也简化不同设备下卡片内容的适配成本。我们在 2017 年的时候就在尝试社区的卡片式设计，最终在这个版本得以正式上线。

---

最后，感谢 Yian、Mr_houzi、二狗蛋丶、沙加 等用户反馈的 BUG 和修改意见，我们仍将持续改进。