css - 如何始终拥有 40-70 个字符宽的页面？屏幕, 移动, 打印

Question

如何使用当前的 CSS 最佳实践来平衡体面的字体大小（无论媒体（小型垂直手机屏幕或整页打印））和每行 40~80 个字符的舒适？

我想我知道常规屏幕的练习，将正文的字体大小设置为某个百分比，将您的主要内容元素标记为宽度为 70em 和最小宽度为 40em ...

但是，我对这个问题的移动和打印公认标准一无所知。

我所有的搜索尝试都把我带到了（现在）从 2002 年到 2011 年关于 [em,pixel,%,pt] 相对于其他的好处的徒劳讨论......

score 4 · Accepted Answer

body {
  min-width: 16em;
  min-width: 40ch;
  max-width: 28em;
  max-width: 70ch;
}

使用ch“字符宽度”的单位，并使用单位设置来支持它em，其数值约为所需字符数的 40%。

单位是指字体的em大小。对于拉丁字母的文本，这大约是字符平均宽度的 40%，可能还要多一些。

单位表示数字 0的ch宽度。它通常是 CSS 中“字符平均宽度”的最佳近似值。现代浏览器支持它，但对于不那么现代的浏览器，首先以em单位设置宽度。

这回答了邮件标题中的问题。消息的正文含糊不清，没有提出可以建设性地解决的问题。

score 0 · Accepted Answer

设置相对于字符大小的页面宽度仅对单型字体有意义。考虑这两个字符串 "iiiiiiiiii" 和 "WWWWWWWWWW" - 都包含 10 个字符，但显然需要不同宽度的容器！

你可以玩转ex/em/ch单位，但它们不会让你完全控制来完成你想做的事情。另外：ch甚至不完全支持！

2 回答 2