html - 流体打印

我正在尝试使用流体排版，目标是在屏幕大小300px和1160px之间缩放文本。
所以在1160px我想要56pxh1和移动30px。
我遇到的问题是h1的大小超过了1160px并且一直在增加。

h1 {
  font-size: calc(30px + (56 - 30) * ((100vw - 300px) / (1160 - 300)));
}

<H1>Fluid Typography</H1>

最佳答案

您需要限制媒体查询之间h1的流体计算。试试这个：

h1 { font-size: 30px; }

@media (min-width: 300px) {
  h1 {
    font-size: calc(30px + (56 - 30) * ((100vw - 300px) / (1160 - 300)));
  }
}

@media (min-width: 1160px) {
  h1 {
    font-size: 56px;
  }
}

首先，需要提供最小字体大小：这是第一行。然后在两个断点之间引入流体计算，at300px精确地给出30px的font-size，at1160px再次精确地计算到56px。在1160px之后，使用media query再次将其保持在56px位置。这样您就可以在设置的断点之间在静态和流动字体之间进行优雅的转换。
你可以在这里找到更多的例子：
https://www.madebymike.com.au/writing/fluid-type-calc-examples/
或者这里：
https://www.smashingmagazine.com/2016/05/fluid-typography/
如果你需要更多的例子，请告诉我，我已经做了很多。

关于html - 流体打印，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52817920/