简化的流体版式

流体排版是指字体大小（以及可能的其他字体属性，如行高）根据屏幕大小（或者如果我们有的话，容器查询）而变化的理念。

其核心技巧在于视口单位。您可以直接使用视口单位设置字体（例如 font-size: 4vw），但是大小的波动非常剧烈，通常不可取。这可以通过使用类似 font-size: calc(16px 1vw) 的方法来缓和。但是，既然我们已经开始使用复杂的计算，最常见的实现方法最终变成了一个用普通英语表达的等式：

我希望字体大小在 320 像素屏幕上为 16 像素，在 1000 像素屏幕上为 22 像素。

最终结果如下：

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 创造的一个术语。

您说是最小值和最大值？！碰巧的是，min() 和 max() 函数已经以这些形式进入了 CSS 规范。

因此，我们可以使用单行代码简化上面的复杂设置并保持锁定：

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://www.php.cn/link/4ac20f72e05b86b3dc759608b60f5d67

视频替代文本：示例展示了如何将 clamp 用于 h1 元素的流体/响应式排版 pic.twitter.com/9iiCxxXJO7

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

以上是简化的流体版式的详细内容。更多信息请关注PHP中文网其他相关文章！