简化流式排版

流式排版是指 font-size（以及可能其他字体属性，例如 line-height）根据屏幕大小（或者如果我们有的话，根据容器查询）而变化的想法。

主要的技巧来自 视窗单位。您可以直接使用视窗单位设置字体大小（例如 font-size: 4vw），但尺寸的波动非常大，通常不可取。可以使用 font-size: calc(16px + 1vw) 之类的方案来进行调整。但是，当我们开始使用计算来进行美化时，最常见的实现方法变成了一个用来计算普通英文的公式

我希望字体大小在 320px 屏幕上是 16px，在 1000px 屏幕上是 22px。

最终 变成了这样

html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
} 

这实质上是在设置字体大小的 **最小值** 和 **最大值**，这样字体就不会缩小或放大到过于极端的程度。“CSS 锁定” 是 Tim Brown 创造的一个术语。

**最小值** 和 **最大值** 您说？！正好，用于这些功能的函数已经 加入了 CSS 规范，形式为 min() 和 max()。

因此，我们可以使用一行代码来简化上面的花哨设置并保持锁定

html {
  font-size: min(max(1rem, 4vw), 22px);
}

我们实际上可能想在此处停止，因为虽然 Safari (11.1+) 和 Chrome (79+) 当前都支持此功能，但这是今天支持范围的极限。说到这里，您可能还想在它之前添加一个 font-size 声明，以设置一个没有花哨功能的合理回退值。

但是，只要我们不断突破极限，还有一个函数可以进一步简化事情：clamp()！Clamp 接受三个值：最小值、最大值和中间的灵活单位（或计算或任何其他值），如果值在最小值和最大值之间，它将使用该值。因此，我们的单行代码变得更加简洁

body {
  font-size: clamp(100%, 1rem + 2vw, 24px);
} 

这将在 Chrome 79+ 中起作用（尚未 发布 到稳定版，但很快就会发布）。

Dave 叔叔非常高兴 FitText 现在只有几字节，而不是全部 jQuery 加上 40 行代码。以下就是 Dave 向其中添加 CSS 自定义属性的方式

---

刚看到这个不错的解释

早间开发信息：CSS clamp 可用于流式排版。🎉

🔗 `clamp` 在 MDN 上：https://#/4xZpDfYoqB

视频 alt：示例展示了如何使用 clamp 为 h1 元素实现流式/响应式排版 pic.twitter.com/9iiCxxXJO7

— Stefan Judis (@stefanjudis) 2020 年 4 月 20 日