流体排版为我们提供了很多机会来更好地设计网络上的阅读体验，但同时也带来了无法控制的字体大小和潜在的可访问性问题。流体网印刷术是否可以使用？

请注意，本文使用GIF动画来说明响应/流畅的Web排版的不同方法，并且对于移动设备来说可能非常繁重。

浏览器对视口单元的支持一段时间以来一直很好。现在调查一下自2013-2014以来，大多数浏览器完全支持它们。微软的Edge是一个例外（这并不奇怪），因为自2017年10月发布的Edge 16版本以来它只支持它们。不过，它已经过去两年了。所有其他主流浏览器支持视口单元5 – 6年，为什么我们不经常在网站上遇到流畅的排版？我必须承认，我是调整浏览器窗口大小以查看网站如何调整视口更改的人之一。我做了很多，但我不记得上次我遇到使用流畅网页排版的网站。我知道CSS Tricks使用它，但我想不出其他的例子。所以它让我想知道 – 如何采用这种漂亮的网页排版功能并不是更广泛的？

我很难回答这个问题，因为我认为没有一件事可能是原因。我认为归结为：

良好的响应式网页设计/开发仍然是艰难和复杂的
许多设计师/开发人员认为网络排版（静止）并不重要
潜在的可访问性问题
流畅的网页排版可能非常棘手。
让我们仔细看看每一个。

良好的响应式网页设计仍然是艰难而复杂的
上面列出的第一个问题需要付出很多精力和精力。我们为构建响应式网站而拥有的工具是最好的。现在建立一个好的响应式网站要容易得多，但它仍然需要付出相当大的努力。挑选工具，测试它们然后采用它们，如果看起来它们提供我们需要的东西，那么在网页设计过程中需要花费大部分时间。我们还没有真正达到这一点，我们只是设计一个网站和工具，有点自动，确保网站在大多数设备上运行良好。例如，我们仍然在数字设计工具中设计（绘制静态图像）我们的网站，这些工具与实际最终产品的代码相差甚远。这些工具几乎不支持基本的响应式网页设计技术，

网络排版并不重要
第二个是我想用Better Web Type挑战的东西。已经有很多类型的极客，但我觉得有点可悲的是，这些人真的非常关心网络上使用的排版质量。可悲的是，许多网页设计师和开发人员仍然认为网页排版是选择字体并为其网站设置文字大小。

流体网印刷术带有可访问性问题
在设计和构建网站时，很少有人考虑可访问性。我想特别看一下这个探索。我之前注意到流体网版排版的一些可访问性问题，但没有人真正谈到这一点。它只会在这里和那里被提及。

流体网印刷术很棘手
使用视口单元设置字体大小很棘手。我收到很多来自人们的电子邮件，告诉我他们尝试使用流体排版，但实际上从未在实时网站上使用它。但流畅的网页排版不一定非常棘手。我们只需要让它变得容易和更好的方法。而且那里有很多聪明的人都有办法让它发挥作用。让我们看看几种方法，看看哪种方法效果最好，哪种方法使流畅的网页排版不那么棘手，可控，更好。在我们这样做时，让我们看看在使用这种方法时是否存在任何可访问性问题。

响应式排版
好吧，让我们从今天最常见的开始吧。我们探索流体网络排版的这一旅程的起点实际上是响应式网页排版。采用当今最常见的网页设计方法（响应式网页设计），从流动的布局和字体大小开始，设置基本字体大小并根据其定义其他大小是很受欢迎的。这可以简单如下：

 

请注意，所有代码段都使用SCSS。

在这里，我们设置基本字体大小以匹配浏览器的默认字体大小（通常为16px）。在创建具有可访问性的网站时，这是一个重要的步骤，我们稍后会再回过头来看看。但是，我们需要考虑其他设备和屏幕尺寸，并重新安排我们网站的布局，并相应地重新定义字体大小。因此，我们使用媒体查询来定义布局和字体大小发生变化的断点。

 

 

在上面的示例中，我们重新定义了基本字体大小，我们将其增加为我们认为在典型的平板电脑屏幕上可以看到的内容。有了更大的屏幕，我们有更多的工作空间，因此我们对字体大小的更改会更加明显。所以我们也将标题1的大小增加到3.5rem默认值而不是默认值3rem。

看看CodePen 上这个基本的响应式排版示例。这很好用，它得到了所有浏览器的支持，并且没有可访问性问题。那么为什么我们需要改进呢？很多人担心字体调整大小只发生在我们定义的断点处。在上面的示例中，我们网站的读者会看到文本段落设置为16像素，一直到屏幕宽度为768像素。如果他们在平板电脑上阅读我们的网站，他们会得到18像素（112.5％）的基本字体大小。我认为这种心态的主要问题是他们过分关注自己的观点，而不是关注用户。他们调整浏览器窗口的大小，看到如下内容：

是的，字体大小仅在我们定义的断点处发生变化，但我们忘记了用户可以通过其设备上的设置完全控制文本大小。如果他们从台式计算机访问网站并且18像素的基本字体大小对他们来说不够大，他们可以轻松地调整它的大小（如果我们不通过用非覆盖默认字体大小来取消它们的控制） CSS中的相对单位，如像素。

优点

• 用户仍然可以控制字体大小，无可访问性问题。
• 通过一种好的方法，一些媒体查询可以覆盖大部分不同的屏幕宽度。

缺点

• 字体大小大多是静态的，更改与预定义的断点（屏幕宽度）相关联。
• 大屏幕上有大量的空白，字体大小不适应，我们最终得到的网站使用中心的单列布局。

完全流畅的排版

好的，我们可以得出结论，响应式排版方法并不理想。它有点工作，但我们想要更好的东西。我们可以更好地控制的东西。我们希望我们的字体大小在每个屏幕尺寸上都是理想的，而不仅仅是在特定的移动屏幕，平板电脑屏幕，桌面……流畅的排版方式！好吧，我们会看到这一点。

Viewport单元已经推出。这个想法很简单，我们可以使用视口高度和视口宽度单位来定义CSS中任何内容的大小。包括字体大小。在我看来，视口单元的引入更多是作为一种扩展特定和大多数固定类型的网站布局的方式，类似于Sebastian Eberlein 在他的Hacker Noon文章中描述的方式。

但是nevertheles，视口单元已被用作长时间流畅缩放字体大小的方法。克里斯·科伊尔（Chris Coyier）在2012年写了这篇文章并对此感到兴奋，因为我们知道一行文字的理想宽度大约是80个字符，因为“ 这些单元让你感觉很完美，然后将这种体验扩展到任何尺寸的屏幕“ ¹。

这很酷，但实际上并不那么简单。假设我们执行以下操作：

html { font-size: 1.3vw; } h1 { font-size: 3vw; }

我们使用视口宽度单位定义基本字体大小。这意味着屏幕宽度的每次更改都会调整字体大小，而不仅仅是响应式排版的预定义断点。但由于屏幕宽度的变化如此剧烈（移动尺寸与笔记本电脑和台式电脑相比），字体大小变化非常快。在CodePen上查看此流体排版示例，并尝试调整浏览器窗口的大小。你会看到如下内容：

你能看到字体大小在较小（据称是移动）的屏幕尺寸上有多小吗？那太小了，我们怎么解决呢？

优点

• 在实践中，如果不将其与响应式排版结合使用，我认为没有任何使用此方法的优点。

缺点

• 使用Viewport单元定义字体大小的一个缺点是它们无法访问（用户无法控制某些浏览器中的字体大小）。
• 使用视口单位获取字体大小也会覆盖用户的默认字体大小（在浏览器中设置），这是另一个可访问性问题。
• 不可控制的字体大小从一个极端迅速扩展到另一个极端。

添加大量媒体查询以使其工作

因此，完全流畅的网络排版方法显然不起作用。具有讽刺意味的是，使其有效的唯一方法是使用响应式排版技术来尝试控制快速变化的字体大小。但是，与我们的响应式网页排版方法不同，在这种情况下，我们需要大量的媒体查询来限制字体的大小调整。所以我们可以这样做：

在CodePen上查看这个流畅且响应迅速的Web排版示例，并尝试调整浏览器窗口的大小。你会发现它比上面的完全流畅的方法更好，我们可以说它有点工作（我用了七个断点来使它工作）。

我不了解你，但对我来说，这看起来太多的工作和麻烦，我们获得的回报很少。是的，我们的字体大小比响应式网页排版方法更好地扩展，但它也带来了其他问题。包括可访问性问题对我来说是禁止的。

优点

• 字体大小可以很好地缩放并适应每个屏幕宽度。

缺点

• 使用Viewport单元定义字体大小的一个缺点是它们无法访问（用户无法控制某些浏览器中的字体大小）。
• 因为我们使用媒体查询来控制字体大小的缩放，所以我们仍然会在调整浏览器窗口大小时获得这些大小的跳转。
• 使用视口单位获取字体大小也会覆盖用户的默认字体大小（在浏览器中设置），这是另一个可访问性问题。

带有CSS锁的流体排版

其他人已经注意到流体网版排版方法中缺乏对字体大小的控制的问题。他们知道添加大量媒体查询是不可取或不理想的，因此他们试图寻找替代方案。Mike Riethmuller ²，Tim Brown ³和Geoff Graham ⁴最终得出结论，使用CSS锁定的Fluid排版可能是最好的方法。

这是一项有趣的技术。它设置了最小字体大小，应使用的屏幕宽度，最大字体大小以及应使用的屏幕宽度以及两者之间的所有流体字体大小。它优雅地解决了字体大小缩放过快的问题，它使用基本的数学方法来实现。下面的图片最好地描述了该方法。左侧和右侧隔间中的字体大小不会改变，它们仅在中间区域中缩放。下门是最小屏幕尺寸，我们对其应用固定的字体大小，对于上门，这是最大屏幕尺寸。

使这项工作的公式相对简单，它需要4个变量：最小尺寸，最大尺寸，最小视口宽度和最大视口宽度。

如果您使用CodePen上的CSS锁定查看流体排版的实例，并尝试调整浏览器窗口的大小，您将获得以下内容。

这非常好用。如果屏幕宽度介于最小值和最大值之间，字体大小可以很好地缩放。如果屏幕宽度小于最小值或大于最大值，我们切换到固定字体大小。从理论上讲，这非常有效。但是当我尝试在Chrome上更改浏览器的默认字体大小时，它对上面的CodePen示例没有任何影响。这是一个问题，因为这意味着这种方法仍然会忽略用户的默认字体大小，从而导致可访问性问题。当用户尝试调整其大小时，某些浏览器也不会调整网站上的字体大小（在Mac上为⌘+）。

优点

• 在调整浏览器窗口大小时，不会跳缩缩放字体大小。
• 字体大小不会缩放到最小屏幕宽度以下和最大屏幕宽度之上。

缺点

• 使用Viewport单元定义字体大小的一个缺点是它们无法访问（用户无法控制某些浏览器中的字体大小）。
• 使用视口单位获取字体大小也会覆盖用户的默认字体大小（在浏览器中设置），这是另一个可访问性问题。

结论 – 我们应该使用流体网印刷术吗？

初看起来，CSS锁定方法看起来是最好的。它绝对解决了无法控制地缩放字体大小的问题。它只使用少量的媒体查询，并没有在缩放字体大小方面发生重大转变。我所有流畅的网页排版技术的问题在于它们都覆盖了浏览器中设置的用户默认字体大小（从我的测试来看，这只是Chrome的情况）。在某些情况下和某些浏览器中，由于使用了视口单元，因此用户无法调整字体大小。这意味着从可访问性的角度来看，这些解决方案都不完全符合要求。

流体排版与默认浏览器字体大小不能很好地匹配，因此在更改之前不应使用。

在撰写完全流畅的排版方法时，我写道：“ 我们希望我们的字体大小在每个屏幕尺寸上都是理想的，而不仅仅是在小型移动屏幕，平板电脑屏幕，桌面……”。我认为这种方法是完全错误的。我们不应该专注于使我们的字体大小适合每个屏幕宽度。我们应该让我们的文本轻松愉快地阅读给每一位用户。这意味着将一些对Web排版的控制留在他们手中。此时，流体网排版干扰太多。如果它与默认的浏览器字体大小很好地合作，我会说它，但是因为它没有，我必须说它不是我们应该使用的方法。至少目前还没有。正如我在书中探讨流体排版时所说的那样，我仍然如此 坚持响应式网页排版。