CSS 字符单元

当涉及到大部分文本的正确可读性时，黄金标准是每行不超过 75 个字符。这在印刷界很容易实现，但在响应迅速、不断变化的网络上 - 静态定义的排版变得有点困难。

您可以经历为每个可能的屏幕尺寸设置媒体查询、相应地调整文本大小和填充的漫长过程 - 但有更好的方法。

角色单位介绍

通过使用 CSS 字符单元 （） 设置主容器或文本元素，只需设置一次字符长度。让我们看一个简单的示例以供参考。ch

假设您有一篇文章将填满整个屏幕长度。像这样：

<div class="container">
    <p>Reprehenderit aliqua in quis eiusmod ea culpa aliquip. Velit duis est irure voluptate occaecat labore laborum ut pariatur ex veniam deserunt esse est. Esse sunt exercitation id reprehenderit deserunt elit commodo sit ullamco amet commodo magna consequat. Excepteur voluptate tempor consectetur eu aliqua aliquip laboris aliquip veniam excepteur labore.</p>
    <p>Voluptate excepteur sint magna ipsum occaecat irure sit. In occaecat excepteur in id ullamco id est incididunt irure et. Consectetur veniam exercitation occaecat exercitation labore nulla excepteur irure ex anim. Commodo sint anim non ad excepteur exercitation eiusmod Lorem nisi. Tempor ut ipsum do adipisicing dolore.</p>
</div>

使用此结构，您通常可以将默认属性设置为所需的最大宽度（无论您认为是最佳阅读长度）：max-width

.container {
    max-width: 38em;
}

这有效 - 但它并不理想。是时候让角色单位来拯救这一天了！您仍将以属性为目标，但这次我们将其设置为使用如下所示的值：max-widthch

.container {
    max-width: 66ch;
}

此设置可确保内容每行不超过 66 个字符，从而毫不费力地获得更好的阅读体验。

浏览器支持

字符单位属性具有相当强大的支持 - 甚至是部分 IE11！