CSS 中的熔融行距

我和 Dave 在 最新的 ShopTalk Show 中播放了 Tim Brown 的一段音频片段，他回复了我们之前关于垂直节奏（以及其他）的一些闲聊。文字记录 在这里。这引发了关于这些事情的另一个有趣的讨论。

其中一小部分是关于 Tim 创造的短语 “熔融行距”，它本质上是取决于行 *长度* 的 line-height。

正如 Tim 所说，这实际上是一种“三元”关系

这里最让我感兴趣的是排版中的基本三元关系——文本的字号、行高和行长。调整这些元素中的任何一个而没有调整其他元素，就会导致阅读不舒适，这也是设计师在处理流体网页布局时遇到困难的原因之一。

在 CSS 中，没有简单明了的方法可以将元素的宽度与其 line-height 连接起来（尽管你可以 使用 JavaScript）。我认为这又是 容器查询 的一个用例！你可以使用媒体查询调整行高（正如 Andy Clarke 建议的那样）。基本示例

main {
  line-height: 1.4;
}
@media (max-width: 600px) {
  main {
    line-height: 1.3; 
  }
}

但是，浏览器窗口宽度并不一定代表当前元素的宽度。

此外，任何固定断点解决方案在这里都不是完美的解决方案。这三个属性之间更加流畅的连接会更好。自 Tim 和他的朋友们在 2012 年进行最初探索以来，calc() 与视窗单位相结合，让我们更近了一步。

我们之前谈论过 视窗单位。通过使用 vw 设置字号，我们可以使字体大小根据浏览器窗口宽度进行调整。

以下是一个示例，其中我们有一些基本值，只需要用视窗单位进行细微调整即可

body {
  font-size: calc(1em + 1vw);
  line-height: calc(1.2em + 1vw);
}

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 熔融行距。

这很简单。Tim 最初建议使用更复杂的公式

事实证明 Mike Riethmuller 已经 玩过这个。例如，它会像 这样 进行操作

body {
  font-size: 1em;
  line-height: 1.4em;
}

@media screen and (min-width: 20em) {
  body {
    font-size: calc(1em + (1.3125 - 1) * ((100vw - 20em) / (80 - 20)));
    line-height: calc(1.4em + (1.8 - 1.4) * ((100vw - 20em) / (80 - 20)));
  }
}

@media (min-width: 80em) {
  body {
    font-size: 1.3125em;
    line-height: 1.8em;
  }
}

Mike 甚至 用 Sass 处理了它

$min_width: 400;
$max_width: 800;

$min_font: 12;
$max_font: 24; 

:root { font-size: #{$min_font}px; }

@media (min-width: #{$min_width}px) and (max-width: #{$max_width}px) {
  :root { 
    font-size: calc(#{$min_font}px + (#{$max_font} - #{$min_font}) * ( (100vw - #{$min_width}px) / ( #{$max_width} - #{$min_width})));
  }
}
@media (min-width: #{$max_width}px) {
  :root { 
    font-size: #{$max_font}px;
  }
}

查看 CodePen 上 Mike (@MadeByMike) 的 精确响应式排版。

所以，是的：这是一个你可以做的事情。