流体排版

Question

我尝试使用流体排版，目标是在屏幕大小300 to和1160 to之间缩放文本。

因此，在1160 So时，我想要56 So H1和移动30 So。

我遇到的问题是，H1的大小超过了1160‘m，而且还在不断增加。

​

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给出精确的30px of font-size，在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，您可以使用以下密辛：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);
}

在全球适用：

1. 定义最小和最大屏幕宽度
2. 在px中为H1元素定义最小和最大字体大小
3. 将流体型混合器应用于根元素(html或体选择器)。
4. 从https://nekocalc.com/px-to-rem-converter生成px到rem表。(注意:生成时需要将根字体大小设置为max_font_size )
5. 根据需要将REM值分配给字体大小。