CSS 像素不是物理像素，但 `ch` 也不是万能替代
开发者 Terence Eden 在个人网站尝试减少 px，改用与字体相关的 ch 和 ex 控制正文宽度与间距。他的出发点很简单：文本页面更应该围绕字符和字形保持比例，而不是围绕一个并非物理像素的抽象单位。
作者：林岚｜OC 开发者生态编辑
开发者 Terence Eden 在个人网站尝试减少 px，改用与字体相关的 ch 和 ex 控制正文宽度与间距。他的出发点很简单：文本页面更应该围绕字符和字形保持比例，而不是围绕一个并非物理像素的抽象单位。
一句话结论：ch 很适合表达“这一行大约容纳多少字符”，但字体间距、界面边框和触控尺寸各有不同参照物；正确做法是按语义选择单位，不是发动消灭 px 的战争。
CSS 中的 1px 是参考像素，并不保证对应屏幕上的一个硬件像素。高密度手机可能用多个物理像素绘制一个 CSS 像素；大电视又会根据典型观看距离解释长度。类似地，CSS 的 cm 和 in 在屏幕上通常也不等同于真实尺子。
Eden 将正文设置为 max-width: min(75ch, 100%)。ch 大致基于当前字体中数字“0”的 advance width，因此 75ch 会随字体变化，适合控制文本行长。垂直方向则可以考虑 ex，它与字体的 x-height 相关，通常接近小写字母高度。
不过，ch 并不等于平均字符宽度。在比例字体中，“0”、汉字、英文小写和标点宽度差别很大；对中文正文，ic 更接近水平方向的全角字符 advance。ex 也会因字体度量和替代字体变化，并不天然适合所有垂直间距。
实际项目通常需要混合：正文最大宽度可用 ch 或 ic，字号和主要间距用 rem，组件内部比例用 em，布局用百分比、容器或视口单位，细边框和像素对齐仍可使用 px。无单位 line-height 往往比固定高度更能随字体缩放。
字体相对单位还会把字体加载变成布局变量。Web Font 未到达时，浏览器先用 fallback 字体计算 ch 或 ex，替换字体后容器宽度可能变化；可变字体的轴设置也可能改变度量。工程上应同时观察首屏和字体加载后的布局，并用 200% 缩放、系统大字体、中文与英文混排测试溢出。单位选择只是起点，最终判据仍是内容在真实环境里能否读完和操作。
关键事实
px：CSS 参考像素，不保证等于一个物理显示像素。ch：以当前字体“0”字形的 advance width 为基准。ex：与当前字体 x-height 相关。- 原作者：只在个人博客实验，并未主张机械替换所有
px。
OC 判断
标题里的“杀死 px”是有趣挑衅，文章本身其实很克制。前端单位没有道德高下，只有参照物是否符合设计意图。可读性还应通过真实字体、浏览器缩放、语言切换和窄屏测试验证。
为什么重要
- 对前端开发者：字体相对单位能让组件更好地适应用户设置。
- 对设计师：固定像素稿无法完整描述跨设备的视觉尺寸。
- 对中文网站：直接照搬英文
ch行宽，需要额外测试汉字与 fallback 字体。
评论
围绕这篇文章补充信息、提出问题或分享观察。