我正在嘗試使用流體排版，目標是在屏幕尺寸300像素和1160像素之間縮放文本。

因此，在1160像素，我想要56像素的H1和移動30像素。

我遇到的問題是，H1的大小增加超過1160像素，并繼續增加。

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; 
  }
}

首先，需要提供最小字體大小:這是第一行。然后在兩個斷點之間引入流體計算，在300像素時，精確地給出30像素的字體大小，在1160像素時，精確地計算出56像素。在1160像素之后，您使用媒體查詢再次將其保持在56像素。這樣，在設置的斷點之間，你就有了靜態和動態排版之間的優雅過渡。

你可以在這里找到更多的例子: https://www . madebymike . com . au/writing/fluid-type-calc-examples/ 或者這里: https://www.smashingmagazine.com/2016/05/fluid-typography/

如果你需要更多的例子，請告訴我，我已經做了很多這樣的例子。

如果您使用SCSS，您可以使用以下Mixin: https://gist . github . com/mcoll 92/3229098 c 32 e 20 C1 d 5593865 a 7 E3 ea 3 da

$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);
}

全球適用:

定義您的最小和最大屏幕寬度 為px中的H1元素定義最小和最大字體大小 將流體類型混合應用于根元素(html或主體選擇器)。 從https://nekocalc.com/px-to-rem-converter.生成px到rem表 (注意:生成時，您需要將根字體大小設置為max_font_size) 根據需要將REM值分配給字體大小 更新2023

隨著CSS的發展，不再需要使用媒體查詢，因為CSS現在提供了clamp(min，calc，max)函數:

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

<H1>Fluid Typography</H1>