流体排版

Question

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

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

我遇到的问题是 H1 的大小增加超过 1160px 并且还在不断增加。

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

<H1>Fluid Typography</H1>

Answer 1

您需要在媒体查询之间限制 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; 
  }
}

首先，需要提供最小字体大小：这是第一行。然后在两个断点之间引入流体计算，在 300px 处精确地给出 font-size 的 30px，并且在 1160px 处再次精确地计算出 56px。在 1160px 之后，您再次使用媒体查询将其保持在 56px。通过这种方式，您可以在设置的断点之间在静态和流体排版之间进行优雅的过渡。

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

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

Answer 2

如果您使用的是 SCSS，则可以使用以下 Mixin： https://gist.github.com/MColl92/3229098c32e20c1d5593865a7e3ea3da

$min_screen_width: 360px;
$max_screen_width: 1448px;
$min_font_size: 38px;
$max_font_size: 52px;

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      font-size: $min-font-size;
      @media screen and (min-width: $min-vw) {
        font-size: calc(
          #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)}*
            ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
        );
      }
      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

全球申请：

定义最小和最大屏幕宽度
以像素为单位定义 H1 元素的最小和最大字体大小
将 fluid-type mixin 应用于根元素（html 或主体选择器）。
从 https://nekocalc.com/px-to-rem-converter 生成 px 到 rem table。（注意：生成时需要设置根字体大小max_font_size）
根据需要将 REM 值分配给 font-size

流体排版

Fluid Typography

html

css

typography