流体排版

直接进入代码，这里有一个可行的实现

html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

值得一看我们最近发布的博文 简化流体排版，它提供了实用的、受限的、基于视窗的字体大小调整方案。

它会将 font-size 从最小 16px（在 320px 视窗下）调整到最大 22px（在 1000px 视窗下）。这是一个演示，但它采用 Sass @mixin（稍后会介绍）。

查看 使用 Sass 的流体字体的基本示例，由 Chris Coyier (@chriscoyier) 在 CodePen 上创建。

Sass 的使用只是为了使输出更容易生成，并且其中涉及一些数学运算。让我们来看看。

使用视窗单位和 calc()，我们可以根据屏幕大小调整字体大小（以及其他属性）。因此，字体大小不是始终保持一致，也不是在媒体查询中从一个大小跳转到另一个大小，而是可以实现流畅变化。

这是数学运算，感谢 Mike Riethmuller

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

数学运算之所以有点复杂，是因为我们试图避免字体大小小于最小值或大于最大值，而使用视窗单位很容易出现这种情况。

例如，如果我们希望字体大小在 14px（最小视窗宽度为 300px）到 26px（最大视窗宽度为 1600px）之间，则公式如下

body {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

查看 JEVevK，由 CSS-Tricks (@css-tricks) 在 CodePen 上创建。

要锁定最小和最大大小，可以使用媒体查询中的这种数学运算。以下是一些有帮助的 Sass 代码...

在 Sass 中

你可以创建一个（非常强大的）mixin，如下所示

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

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

使用方法如下

$min_width: 320px;
$max_width: 1200px;
$min_font: 16px;
$max_font: 24px;

html {
  @include fluid-type($min_width, $max_width, $min_font, $max_font);
}

这是 Mike 的另一个示例，可以轻松地实现流畅的节奏

将理念扩展到标题和模块化尺度

模块化尺度意味着可用空间越多，大小差异越明显。也许在最大的视窗下，层次结构中每个标题的大小都是下一个标题的 1.4 倍，而在最小的视窗下，大小只有 1.05 倍。

查看

“流体字体”的灵感来自 @MikeRiethmuller，现在已发布到 @CodePen 博客。包括“流体模块化尺度！” pic.twitter.com/0yJk8Iq8fR

— Chris Coyier (@chriscoyier) 2016 年 10 月 27 日

使用我们的 Sass mixin，代码如下

$mod_1: 1.2; // mobile
$mod_2: 1.5; // desktop

h1 {  
  font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h2 {  
  font-size: $mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h3 { 
  font-size: $mod_1*$mod_1 *1rem;
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font);
}

其他阅读

• 使用 CSS 锁定实现灵活排版，由 Tim Brown 撰写
• 平衡之道：响应式显示文本，由 Richard Rutter 撰写
• 流体字体示例，由 Mike Riethmuller 撰写