ch是数字“0”的字体宽度单位，非字符计数；用于max-width（如65ch）配合居中和响应式断点可实现阅读友好排版，但不适用于高度控制或非等宽字体场景。
ch单位不能直接“设每行多少字”，它只是个长度单位
很多人误以为 ch 是字符计数单位，其实它等于当前字体中数字 "0" 的宽度——仅此而已。浏览器用它算容器宽度，换行由内容+宽度共同决定。所以你写 width: 60ch，并不保证每行正好显示 60 个中文或英文字符；等宽字体下（如 Consolas）1ch ≈ 1 英文字符宽度，还算靠谱；但思源黑体、PingFang SC 等中文字体里，一个汉字实际占约 1.2–1.5ch，标点混排时偏差更大。
用ch设置阅读友好宽度：选对基准值 + 加上max-width约束
公认舒适阅读的单行长度是 50–75 个英文字符（≈30–45 个中文字符）。要落地，得把 ch 当作“宽度锚点”，而不是“字数开关”：
-
max-width: 65ch是较稳妥的起点，适合多数正文场景（如文章段落、说明文字） - 必须配合
margin: 0 auto居中，否则窄屏下会左贴边、阅读吃力 - 别单独用
width: 65ch—— 它会让容器在小屏上溢出，反而需要横向滚动 - 中文字体建议从
45ch起试，再根据实际渲染微调；混排多的文案（含代码、URL、英文术语），往55ch–60ch靠
ch + calc() 实现自适应侧边栏与主内容分离
当页面有固定宽度导航或工具栏时，ch 和 calc() 配合能避免像素硬编码：
aside {
width: 20ch;
}
main {
width: calc(100% - 20ch);
}这种写法让侧边栏始终“宽约20个0字符”，主内容自动填满剩余空间，且随根字体大小缩放。但要注意：
立即学习“前端免费学习笔记（深入）”；
- 若侧边栏内容超出
20ch宽度（比如长菜单项），需加white-space: nowrap或overflow: hidden控制截断方式 - 不推荐在非等宽字体下用
ch做高度控制（如line-height: 2ch），因"0"高度 ≠ 行高基准，容易错位 - IE 不支持
calc()里的ch单位（Edge 16+ 才开始支持），需确认目标兼容范围
ch和响应式断点不是替代关系，而是互补手段
ch 解决的是“基于字体的宽度尺度”，媒体查询解决的是“设备能力切换”。两者常一起用：
@media (max-width: 768px) {
.article-content {
max-width: 45ch; /* 小屏更窄，防单行长句撑开 */
font-size: 0.95rem;
}
}
@media (min-width: 1200px) {
.article-content {
max-width: 70ch; /* 大屏可放宽，但不超过舒适上限 */
}
}真正容易被忽略的一点是：ch 的实际物理宽度随 font-size 动态变化，而媒体查询断点是固定像素值。这意味着同一 max-width: 60ch 在 16px 和 20px 字号下，对应的真实像素宽度差了 25%，但阅读体验仍稳定——这正是 ch 的价值所在，也是它不能脱离字体上下文单独谈“效果”的原因。
