流体排版这一词似乎看上去有点陌生，在英文中常把他称之为Fluid Typography，当然也有很多朋友称之为流体字号（Fluid Size）。大概的意思就是Web排版中的font-size会根据浏览器窗口的大小自动改为。比如下图所示的一个效果：

看到上图的效果，大家首先可能会想到的是CSS中的Viewport单位vw或者vh之类，当然也可能会认为是通过媒体查询来改变元素font-size来实现的。事实上，他们都能实现类似的效果，但问题是我们想要精确的实现流体排版（根据视窗大小变化精确改变font-size的值），那并不是件容易的事情。那问题来了，我们有没有方法可以实现所谓的精准流体排版呢？答案是肯定的，接下来我们就要来探讨这方面的实现思路、细节以及使用到的一些数学公式。

实现思路

精准流体排版最核心的就是浏览器视窗大小改变时，font-size能够根据视窗的大小做到精准的变化。当用户收缩和拉大浏览器窗口时，其大小有一个变化，在CSS中，咱们通过把每一个大小点称为断点，断点也是媒体查询中一个重要的概念。除此之外，如果我们用Viewport单位来描述的话，视窗大小始终是100vw。如果font-size设置为2vw，那么其大小就是浏览器窗口宽度的2%，当窗口拉到1000px时，这个时候font-size对应的是20px。

原理是不是很简单，而且其中还涉及到一些数学计算，CSS中动态计算的话，可以依赖calc()函数来进行计算，详细的使用方式可以点击这里。

其实有关于这方面的介绍，在早期分享的文章中也或多或少的提到过：

• Web排版的缩放
• 如何精确控制响应式排版
• 基于视窗单位的排版

为了方便大家使用，在Sassmagic仓库中，使用SCSS声明了一个混合宏：

/// Fluid vertical rhythm and Fluid Modular scale
/// @param {string} $properties - CSS属性
/// @param {string} $min-vw - 视窗最小宽度(viewport min-width)
/// @param {string} $max-vw - 视窗最大宽度(viewport max-width)
/// @param {string} $min-value - 最小值
/// @param {string} $max-value - 最大值
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
    & {
        @each $property in $properties {
            #{$property}: $min-value;
        }

        @media screen and (min-width: $min-vw) {
            @each $property in $properties {
                #{$property}: calc(#{$min-value} + #{strip-units($max-value - $min-value)} * ((100vw - #{$min-vw}) / #{strip-units($max-vw - $min-vw)}));
            }
        }

        @media screen and (min-width: $max-vw) {
            @each $property in $properties {
                #{$property}: $max-value;
            }
        }
    }
}

只需要这样调用：

$minScreen: 20rem; // $min-vw
$maxScreen: 50rem; // $max-vw
$minFont: .8rem; // $min-value
$maxFont: 2rem; // $max-value
:root {
    @include fluid-type(font-size, $minScreen, $maxScreen, $minFont, $maxFont);
}

就可以编译出：

:root {
    font-size: 0.8rem;
}
@media screen and (min-width: 20rem) {
    :root {
        font-size: calc(0.8rem + 1.2 * ((100vw - 20rem) / 30));
    }
}
@media screen and (min-width: 50rem) {
    :root {
        font-size: 2rem;
    }
}

既然前面都有多篇文章介绍过了，为何还需要花时间来整理这篇文章呢？正如文章开头所说，我们今天主要介绍一些细节和原理以及一些数学知识。在继续阅读下面的内容之前，需要特别感谢@Jake Wilson分享的博文：《CSS Poly Fluid Sizing using calc(), vw, breakpoints and linear equations》。这篇文章介绍了精准流体排版的一些细节以及用到的相关数学知识。接下来的文章中，将会直接使用@Jake Wilson文章中使用到的公式。

计算的演变过程与细节

假设页面中有一个h1的标题元素，希望在不同的断点之下有不一样的font-size，这样可以让我们阅读体验更友好。比如：

• 在小屏幕下（Small：576px）标题h1的font-size是22px
• 在中间屏幕下（Medium：768px）标题h1的font-size是24px
• 在大屏幕下（Large：992px）标题h1的font-size是34px

前面也提到过了，改变font-size我们有多种方式。首先来看CSS媒体查询的实现方式：

h1 {
    font-size: 22px;
}
@media (min-width:576px) {
    h1 {
        font-size: 22px;
    }
}
@media (min-wid