px的终结，ch的崛起

# 告别px，拥抱ch！ 来源：https://shkspr.mobi/blog/2026/08/death-to-px-long-live-ch/ 像素是个谎言。即使你自认为在用“像素完美（https://shkspr.mobi/blog/2018/11/the-myth-of-the-pixel-perfect-grid/）”的精度绘制内容，你的显示器也在欺骗你。世间并无柏拉图式完美方格组成的理想网格。 在CSS中，像素更是双重谎言（https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units#lengths）： > 请注意，`1px`并不一定等于一个物理设备像素。在高清显示屏上，它可能跨越多个物理像素。同样，CSS中的`1cm`通常也不完全等同于国际单位制中的一厘米。在大尺寸电视屏幕上，它的实际长度往往更长。这些长度本质上是感知性的：`16px`在手机、笔记本或电视屏幕上，于常规观看距离下看起来大致相同。 本博客以文字内容为主。我希望文本宽度对普通读者而言易于阅读（https://journals.uc.edu/index.php/vl/article/view/5765/4629）。因此，我并未将主体宽度设为屏幕百分比，而是采用`ch`单位基于字符宽度设置——它虽不完全等同于字符宽度（https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/），但足以满足我的需求： ``` CSS--width-content: min(75ch, 100%); main { max-width: var(--width-content); } ``` 对于内边距和外边距，道理同样如此。若想为元素设置间距，我希望该间距能与内部文字保持比例关系。 就宽度而言，复用`ch`单位是合理的选择。我需要间距与文字形成比例。 但对于*高度*，用字符宽度来表达垂直距离或许并不合理？这种情况下可使用`ex`单位（https://www.w3.org/Style/Examples/007/units.en.html）。该单位表示典型小写字母的高度。 正如我此前尝试从HTML中移除CSS类（https://shkspr.mobi/blog/2025/09/class-warfare-can-i-eliminate-css-classes-from-my-html/）一样，任何技术实践都可能矫枉过正。我并未将*所有*px引用都改为ch，只是进行实验验证其可行性。 使用px或其他任何测量单位本身并无过错，谈不上不道德或邪恶。选择ch和ex单位，只是契合我个人的特定偏好。