文章标签

流体排版是一种 花哨的方式，用于“描述根据视窗大小流畅缩放的字体属性，例如大小或行高”。它 也以其他名称而闻名，例如响应式排版、灵活类型、流体类型……

当 Chris 第一次向我发送这个提示时，我当时在考虑写一篇关于渐进增强的内容，但这个主题范围太广，无法成为一个东西，而且对于那些已经熟悉我写作风格的人来说，它太过可预测。也就是说，我……

根据视窗宽度动态缩放 CSS 值并不是一个新话题。你可以在 CSS-Tricks 上找到许多深入的介绍，例如 这篇文章 或 这篇文章。

但是，大多数这些示例都使用了……

Sara 深入研究了一个错误，我 恰好提到了它，早在 2012 年，当时流体类型在浏览器窗口调整大小时不会调整大小。当时，它影响了 Chrome 20 和 Safari 6，但该错误在今天的 Safari 中仍然存在……

响应式排版过去曾尝试过许多方法，例如媒体查询和 CSS calc()。

在这里，我们将探索一种不同的方式，在设置的最小值和最大值之间线性缩放文本……

有趣的事实：可以完全不使用任何媒体查询来创建响应式组件。当然，如果我们有 容器查询，那么它们将非常适合在组件级别进行响应式设计。但我们没有。尽管如此，无论有无……

不错的视频，来自 Kevin Powell。以下是一些笔记、想法以及我在观看它时学到的东西。当它们刚出来时，我主要痴迷于 font-size 的用法，但它们只是函数，因此它们可以在任何地方使用……

CSS 没有 max-font-size，因此如果我们需要类似的东西，我们必须想办法。

为什么你需要它？嗯，font-size 本身可以用动态方式设置。例如，font-size: …

流体排版是指根据屏幕尺寸（或者如果我们有容器查询，则根据容器查询）更改 font-size（以及可能类型的其他属性，例如 line-height）的概念。

核心技巧来自 视窗单位。你可以用视窗单位来设置类型（例如 font-size: 4vw），但尺寸的波动非常极端，通常是不可取的。让我们看看一种抑制极端情况的技术，但现在由于 CSS 正在不断发展，它基本上只是一行代码！