Question

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

所以在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处精确给出30px的{{1}}，在font-size处再次给出精确的1160px。在56px之后，您可以使用媒体查询再次将其保留在1160px。这样，您可以在设置的断点之间在静态和流体排版之间进行平滑过渡。

您可以在此处找到更多示例： 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);
}

要全局申请：

定义最小和最大屏幕宽度
以px为单位定义H1元素的最小和最大字体大小
将流体类型混合应用于根元素（html或主体选择器）。
从https://nekocalc.com/px-to-rem-converter生成px到rem表。（注意：生成时，您需要将根字体大小设置为max_font_size）
根据需要将REM值分配为字体大小

Answer 3

您可以这样分隔CSS

@media screen and (max-width: 1160px) {
h1 {}
}

流体印刷术

3 个答案: