← 全部文章

教程

完美的阅读栏宽

17 5月 2026 · 作者 JustZix Team

如果有一项改动能改善你读的每一篇文章,那就是栏宽。排版师称之为"尺度",把它调对,就是毫不费力的阅读与持续眼疲劳之间的区别。

66 字符规则

几十年的排版实践指向每行大约 50 到 75 个字符,66 是最佳点。太短,你的眼睛会不停跳动;太长,从一行末尾回到下一行开头的回扫会变得不可靠。大多数网站在宽屏显示器上把文字拉到齐边,落在远超 120 个字符的位置——完全在舒适范围之外。

用 ch 单位来衡量

CSS 给了你一个正为这项工作打造的单位。ch 单位等于当前字体中 0 字形的前进宽度。因此 66ch 的 max-width 会自动跟随你的字体选择:

article,
.entry-content,
main .content {
  max-width: 66ch !important;
  margin-inline: auto !important;
}

因为 ch 是相对于字体的,无论网站使用紧凑的无衬线还是宽阔的衬线,同一条规则都能保持一个好的尺度。

让宽元素保持宽

限制文章栏不应把你的图片和代码困在里面。让特定的子元素突破到全宽,而文字保持窄:

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
}
article figure,
article pre,
article table {
  width: 90vw !important;
  max-width: 90vw !important;
  margin-left: calc(33ch - 45vw) !important;
}

负边距把一个全宽子元素相对于窄文字栏重新居中。按喜好调整数字——目标是让媒体舒展,而散文保持克制。

响应式内边距

在手机上,硬性的 max-width 无关紧要,但边缘内边距很重要。把两者组合起来,让规则到处都能工作:

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
  box-sizing: border-box !important;
}

clamp() 给小屏幕一个舒适的边距,给大屏幕一个宽裕的边距,不用一条媒体查询。

宽度与节奏配对

宽度与宽裕的垂直间距搭配效果最好。一个行距紧凑的窄栏仍然感觉局促。加上这个配套块:

article p {
  line-height: 1.7 !important;
  margin-bottom: 1.5em !important;
  font-size: 1.15rem !important;
}

把它应用为一条 JustZix 规则

新建一条规则,如果你想到处生效就设一个宽泛的 URL 模式,例如 *://*/*,或者把它限定到某个特定出版物。把宽度和节奏块粘贴进 CSS 面板并保存。访问几篇文章,微调 ch 值直到行感觉自然——大多数人最终落在 60ch 到 72ch 之间。

正确的尺度是隐形的:你就是不再注意布局,而开始吸收文字。探索我们的现成示例获取调校好的预设,阅读关于构建完整阅读模式的配套指南,并下载 JustZix 开始衡量。