在移动端重新审视阅读密度

把浏览器窗口逐渐缩窄，直到页面能够塞进手机屏幕，并不等于完成了移动端设计。桌面与手机之间改变的不只是可用宽度，还有阅读距离、握持方式、滚动频率和周围环境。

同一套排版参数在桌面上可能显得从容，到了手机上却会变得松散；也可能为了节省空间而缩得过小，让读者需要更集中地辨认文字。移动端真正需要调整的是信息密度，而不是单独追求“更大”或“更小”。

一行能容纳多少信息

中文没有天然的词间空格，行长变化会直接影响断句节奏。在较窄的屏幕上，字号增加一两个像素，就可能让标题多占一行，让摘要从三行变成五行。

这并不意味着换行越少越好。合适的目标是让每行保持足够完整的语义，同时避免读者在过长的行中反复寻找下一行起点。

可以从三个变量一起观察：

单独调整其中一项，通常会改变另外两项带来的感受。因此，每次修改都应该回到真实设备上重新检查。

首页和正文需要不同密度

文章正文是连续阅读场景，可以使用相对舒展的行高和稳定的段落间距。首页文章列表则承担浏览和选择任务，需要在有限空间里同时呈现日期、标题、摘要和标签。

如果两者共享同一套字号，首页往往会变得冗长；如果为了首页压缩全局正文，文章页又会失去阅读舒适度。更合理的方式是按照内容职责建立独立参数，让调整发生在准确的范围内。

@media (max-width: 420px) {
  :root:lang(zh-CN) {
    --type-body-size: 16px;
    --type-home-post-title-size: 17px;
    --type-body-dense-size: 13px;
  }
}

这组数值表达了明确的层级：正文保持可读，列表标题略强，摘要进一步弱化。具体数值可以继续调整，但三者的职责不应混淆。

不要只依赖桌面设备模拟

浏览器开发者工具适合快速检查断点和溢出，却无法完全模拟真实手机上的字体渲染、系统缩放、浏览器工具栏和安全区域。完成第一轮调整后，最好使用同一局域网中的真实设备访问开发服务器。

检查时不必只盯着某一个区块，可以沿着完整阅读路径滚动：

• 导航是否容易点击，换行后是否仍然整齐；
• 首页首篇文章与后续条目是否存在明确层级；
• 长标题是否产生孤立的单字行；
• 摘要截断后是否仍能表达有效信息；
• 页面底部的上一篇与下一篇是否会因为标题过长而拥挤。

移动端设计最终是一种取舍：屏幕空间有限，但内容的重要性并没有减少。好的响应式排版不会简单删除信息，而是通过更准确的层级，让读者在更小的空间里仍然能够从容地判断和阅读。