事件概述

近日，Terence Eden 在他的博客上发表了一篇题为 Death to px, long live ch 的文章，引发了 Hacker News 上的讨论。文章的核心观点是：像素（px）在 CSS 中是一种“谎言”，它并不等同于物理设备像素，也不适合作为文本类网站布局的唯一度量单位。作者分享了自己在博客中改用 ch 和 ex 等相对单位来设置文本宽度与间距的实验，并邀请读者讨论。

关键技术点

1. 像素的双重“谎言”

原文指出：

  • 1px 在 CSS 中并不一定等于一个物理设备像素，在高清屏幕上可能覆盖多个物理像素。
  • 1cm 在 CSS 中也往往不等于真实世界的 1 厘米，在大型电视屏幕上通常更长。
  • 这些单位本质上是感知长度：16px 在手机、笔记本和电视屏幕上，在典型观看距离下看起来大致相同。

2. 使用 ch 单位控制文本宽度

作者认为博客主要以文本为主，所以希望正文宽度适合“普通人类”阅读。他使用 ch 单位——即字符宽度（约等于 0 的宽度）——来设置主内容区宽度：

1
2
3
4
--width-content: min(75ch, 100%);
main {
  max-width: var(--width-content);
}

这样文本行宽会随字体大小变化，而不是基于视口或固定像素。

3. ex 单位用于垂直间距

对于间距，作者认为宽度可以复用 ch，但垂直距离基于字符宽度并不合理，因此提出使用 ex 单位——即小写字母（如 x）的高度。这能让垂直节奏与文字形态更协调。

4. 不要极端化

作者明确表示，自己并没有把所有 px 都替换掉，而是实验性尝试。他同时提到类似自己之前“从 HTML 中消除 CSS 类”的想法，说明过度追求某种风格可能走偏。

对数据科学或 AI Agent 落地的意义

表面上看，这是一篇前端技术分享，但它的思维模式对数据科学和 AI Agent 的界面设计有启发：

  • AI Agent 的交互界面需要适应不同输出环境：Agent 可能将结果渲染到手机、桌面、甚至语音设备。使用相对单位有助于保证在未知设备上具有良好的可读性，减少因固定像素导致的布局断裂。
  • 数据可视化中的文本可读性：数据科学仪表盘常使用固定像素设定图表和标签，但当终端尺寸多样时，基于 ch/ex 的排版策略更能保持信息密度与阅读舒适度。
  • 语义化设计的思考方式：不是“看起来多大”，而是“和内容什么关系”，这与数据建模中关注量纲和上下文的思想一致。

我的技术点评

Terence Eden 的文章虽是个人站点的一次小实验，却击中了现代 Web 布局的一个痛点：绝对单位在多样化的屏幕上并不可靠。ch 和 ex 这类相对单位提供了更贴近内容语义的度量方式，尤其适合文本密集型页面。

不过，评论区也提供了有价值的补充：

  • Tyler Sticka 提醒，ch 单位与 Web 字体组合时可能引起布局偏移（layout shifts），尤其是字体加载前后字符宽度不一致，建议使用系统字体可避免该问题。
  • Adam 建议使用 lh 单位（line-height）来控制上下内边距，它与 ch 搭配可以形成更和谐的排版节奏。
  • 还有评论者提到使用 vh 单位让页面随屏幕缩放。

这些讨论说明，没有万能单位，关键是理解不同单位的适用场景。对于追求“像素完美”的设计师，这篇文章是一次温和的提醒：完美也许应该建立在内容之上，而非像素网格之上。

原文链接

Death to px, long live ch! – Terence Eden’s Blog