时间戳

首页 > 解决方案 > 流体排版

html - 流体排版

问题描述

我正在尝试使用流畅的排版，目标是在屏幕尺寸 300 像素和 1160 像素之间缩放文本。

所以在 1160px 我想要 56px H1 和移动 30px。

我遇到的问题是 H1 的大小超过了 1160 像素并不断增加。

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

标签： htmlcsstypography

解决方案

您需要限制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保持它之后。56px通过这种方式，您可以在设置断点之间的静态和流畅排版之间进行优雅的过渡。

您可以在此处找到更多示例： https://www.madebymike.com.au/writing/fluid-type-calc-examples/ 或此处： https : //www.smashingmagazine.com/2016/05/fluid-排版/

如果您需要更多示例，请告诉我，我已经做了很多。

推荐阅读