流体排版线性过渡：如何计算 calc() 表达式？

Question

使用例如描述的方法Mike Riethmuller 使用 calc() 实现从最小字体大小到最大字体大小的流畅过渡，结果 return 从 calc() 编辑并显示在浏览器中让我有些困惑（而不是预期的）。以下代码如何 return h1 在视口大小从 25rem 到 80rem 的情况下如何产生这个结果？（我也包含了 html 字体大小的 calc()，因为它也随 h1 成比例缩放）

结果：

h1 calc(0.450091rem + 3.38364vw)

代码：

html {
  font-size: 1.125rem;
}

@media screen and (min-width: 25rem) {
  html {
    font-size: calc(1.125rem + 0.25 * ((100vw - 25rem) / 55));
  }
}

@media screen and (min-width: 80rem) {
  html {
    font-size: 1.375rem;
  }
}

h1 {
  font-size: 1.296rem;
}

@media screen and (min-width: 25rem) {
  h1 {
    font-size: calc(1.296rem + 1.861 * ((100vw - 25rem) / 55));
  }
}

@media screen and (min-width: 80rem) {
  h1 {
    font-size: 3.157rem;
  }
}

当我们进入视口最小宽度 80rem 并达到最大字体大小 3.157rem 时，结果是 "jumpy" 非流体过渡。

Answer 1

由于您正在更改 html 元素的 font-size，因此您正在更改 rem 值。这有点棘手，但让我们按照代码和计算一步步来。

最初我们将在 html 内有一个 font-size 等于 1.125rem 并且 h1 的 font-size 等于 1.125 * 1.296 * 16px = 23.328px.对于媒体查询，我们将有 25rem = 25*16px = 400px 和 80rem = 80*16px = 1280px¹.

在 400px（第一个媒体查询）之后，它变得棘手，因为我们将使用 html 的字体大小动态值，因此 font-size 用于 h1会是这样的：

 (1.296* P *16px + 1.861 * ((100vw - (25 * P * 16px) ) / 55))

哪里

 P = (1.125 * 16px + 0.25 * ((100vw - 25 * 16px) / 55))

现在，当我们到达下一个媒体查询 (1280px) 时，我们将 100vw 等于 1280px（不是我们想象的 80rem！） P = 1.375rem 所以考虑到 before 1280px 的结果将是 1.296 * 1.375 * 16px + 1.861 *((1280px - 25 * 1.375 * 16px)/55) = 28,512px + 24.7px = 53.21px。

考虑公式后1280px的结果将是3.157 * 1.375 * 16px = 69.454px。这解释了为什么你没有过渡，罪魁祸首是 100vw 等于 1280px 而不是 80rem 所以你想要 (80 - 25)/55 = 1

按照您找到的公式，我们将得到相同的结果：

h1 calc(0.450091rem + 3.38364vw)

在 80rem 时 100vw 将是 1280px 并且 3.38364vw 将是 43.13px 并且 0.45rem 将是 0.45 * 1.375 * 16px = 9.9px以及总计 53.03px.

结果也是合乎逻辑的，因为 calc 将简化公式以将所有相同的单元组合在一起：

calc(1.296rem + 1.861 * ((100vw - 25rem) / 55))
calc(1.296rem + 1.861 * (1.8181vw - 0.4545rem)
calc(1.296rem + 3.3834vw - 0.8459rem)
calc(0.4501rem + 3.3834vw)

¹为什么在媒体查询中我们不乘以html中使用的值？

考虑到下面的计算，我们可能认为在媒体查询中我们也应该考虑相同的逻辑，因此 25rem 和 80rem 也应该是动态的。 the specification:

中详述的媒体查询并非如此

Relative length units in media queries are based on the initial value, which means that units are never based on results of declarations.

所以无论 html 中使用的 font-size 的值是什么，我们将始终考虑媒体查询中 1rem 的 16px 的初始值。

^{由于四舍五入，使用不同方法得到的值之间会存在一些细微差异。目的不是提供精确的计算而是解释计算。}

流体排版线性过渡：如何计算 calc() 表达式？

Fluid Typography Linear Transition: How is the calc()-expression computed?

css

font-size

typography

css-calc