首页 文章

流体排版线性转换：如何计算calc（） - 表达式？

提问于
浏览 次
1

使用例如描述的方法 . Mike Riethmuller使用calc（）来实现从最小字体大小到最大字体大小的流体转换，从calc（）返回并在浏览器中显示的结果对我来说有些令人费解（并且不是预期的） . 以下代码如何在视口大小从25rem到80rem的情况下为h1返回此结果？ （我也为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的最大字体大小时，结果是“跳跃式”非流体过渡 .

css font-size typography css-calc

1 回答

  • 1

    由于您要更改 html 元素的 font-size ，因此您将更改 rem 值 . 它按照代码和计算步骤进行操作 .

    所以我们从 html 中的 1.125rem 开始 html ， font-size 等于 1.125 * 1.296 * 16px = 23.328px ， 25rem = 25*16px = 400px 和 80rem = 80*16px = 1280px * .

    现在，它变得棘手，因为在 400px 之后我们将拥有动态值，所以 font-size 对于 h1 将是类似的

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

    同

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

    现在，当我们达到 80rem 限制时，我们将 100vw 等于 1280px （不像我们想象的那样80rem！）和 P = 1.375rem 所以结果将是 1.296 * 1.375 * 16px + 1.861 *((1280px - 25 * 1.375 * 16px)/55) = 28,512px + 24.7px = 53.21px . 如果我们考虑 min-width:80rem 之后的公式，我们将 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)

    *Why in the media query we don't multiply with the value used in html?

    考虑到下面的计算，我们可能认为在媒体查询中我们也应该考虑相同的逻辑，因此 25rem 和 80rem 也应该是动态的 . 媒体查询不是这种情况，详见the specification：

    媒体查询中的相对长度单位基于初始值，这意味着单位永远不会基于声明的结果 .

    因此，在 html 中使用的 font-size 的值是，我们将始终在媒体查询中考虑 16px 的初始值为 1rem .

    由于某些舍入，使用不同方法获得的值之间会有一些细微差别 . 目的不是提供精确的计算，而是解释计算 .

    回复于

相关问题