书签用于着色 45 到 75 个字符之间的文本（用于行长测试）

最近在 CSS Dev Talk 上，我参加了 Clarissa Peterson 的演讲，主题是响应式网页排版。其中一部分内容是关于行长和可读性的。当然，每个规则都有例外，您的实际效果可能有所不同，但传统观点认为正文（长文本、多段落，需要不止一眼才能看完...）每行应包含 45 到 75 个字符才能保证舒适度。更短则显得笨拙，更长则容易让人迷失方向，难以找到下一行。

在固定宽度设计的时代，让文本每行包含 45 到 75 个字符相当容易。您可以选择一个合适的正文字体，然后调整字体大小和容器宽度，使其大致正确。

但在灵活宽度设计的时代，您该怎么办呢？

虽然容器宽度可能会发生变化，但这并不意味着您必须牺牲舒适的阅读行长。您可以在某些断点（媒体查询）处调整容器宽度和字体大小，使其尽可能接近。请记住，它不需要完全精确，这不是一个硬性的科学。

但如何测试特定行上有多少个字符呢？Clarissa 想出了一个巧妙的办法，就是在超过 45 个字符的地方插入一个 span，然后对其进行样式设置，更改文本颜色，并在 75 个字符处结束该 span。这样，您就可以直观地看到这些断点。以下就是 Clarissa 的幻灯片（嵌入），其中包含 span 想法的那一页

我认为将此过程自动化将是一件非常棒的事情，这样您就可以在任何网站上使用它。书签非常适合此用途。因此，我们现在就来试试吧。

查看代码笔 书签用于将 45 到 75 个字符之间的文本变成红色，由 Chris Coyier (@chriscoyier) 在 CodePen 上创建。

将该按钮拖动到您的书签栏，然后在您想要使用的任何网站上单击它。首先单击它以激活它，然后单击正文内容元素（例如段落）。然后，您可以调整窗口大小，以查看换行位置，并尝试使其尽可能接近。

我没有使用任何花哨的算法，但只是通过调整，我就在简单的居中文本列上获得了非常接近的结果。

以下 CSS 代码是其来源：

body {
  font-family: "Lucida Grande", sans-serif;
  margin: 20px auto;
  width: 95%;
  font-size: 70%;
  line-height: 1.4;
}
@media (min-width: 400px) {
  body { width: 90%; font-size: 75%; }
}
@media (min-width: 700px) {
  body { width: 80%; font-size: 90%; }
}
@media (min-width: 850px) {
  body { width: 70%; font-size: 100%; }
}
@media (min-width: 1000px) {
  body { width: 60%; font-size: 110%; }
}
@media (min-width: 1100px) {
  body { width: 50%; font-size: 115%;}
}
@media (min-width: 1450px) {
  body { width: 40%; font-size: 125%; }
}