如何实现 font-size 的响应式

本文样式代码采用 SCSS。

那么多的文章讲了响应式的网站如何布局，使用 CSS 如何实现，如何 Blah Blah 的。可是，咱们都忘了很重要的一点——对字体大小的响应式控制。

如今的不少网站，从布局上来讲，尽管是响应式的(固然，或许能够说成所谓响应式的)。可是，从字体上来讲，却不必定是响应式的。虽然，每一个网站可能会经过某些方式(好比频繁使用 @media )来让本身的网站在不一样的屏幕大小下显示不一样大小的字体，可是，这样不能叫作响应式，这只是一种适应式的作法。

那么，怎么样才能对咱们的 font-size 实现真正的响应式呢？

咱们须要作的主要有如下两点：

一、制定一个最大的和最小的屏幕宽度值，咱们的 font-size 应该是在这个屏幕范围内平滑均匀的变化；

不可能让字体大小一直不停的变化。试想一下，本身一直缩小或者方法浏览器，字体一直变小或者变大的场景。

二、制定最大和最小的 font-size，屏幕大小小于最小的屏幕宽度值的时候，应用最小的 font-size，反之，应用最大的 font-size；

OK，计划制定好了，那么，应该如何实施呢？咱们须要用到哪些技术呢？

其实要用到的技术很少，只是，咱们须要把脑子转一下。

• @media：CSS Level 3 提供的媒体查询，只要作过响应式，或者任何适应屏幕功能的确定用过这个属性。因此，在此不过多解释此属性，详细可查看 @media | MDN
• vw：Viewport 单位，1vw 至关于屏幕宽度的百分之一。此处也不过多解释，详细可查看 length | CSS
• calc：这是 CSS 提供的一个很是强大的属性，能够用来动态计算 CSS 的值。咱们的功能主要就是经过这个函数来实现。详细可查看 calc | MDN

OK，须要的技术也齐全了。那么，如今就来一步一步实现。

定义变量

按照上文中所说的计划那样，咱们须要定义四个值，他们分别是最小屏幕宽度，最大屏幕宽度，最小字体，最大字体。

$min-font-size: 14px;
$max-font-size: 18px;
$min-screen: 600px;
$max-screen: 1200px;复制代码

不过，使用 px 来定义字体大小显得不是很优雅，咱们可使用 rem 来定义咱们的字体。那么，这时候，就须要先对网站的根元素设置字体大小了。

:root {
    font-size: 10px;
}复制代码

而后，再来更新咱们的变量。

$min-font-size: 1.4rem;
$max-font-size: 1.8rem;
$min-screen: 600px;
$max-screen: 1200px;复制代码

咱们把咱们的变量定义和根元素的 font-size 放在文件的顶部。在这里，咱们就不写那些相关的 reset 等样式了。

加入测试内容

起了个好头，而后进行下一步，很简单，写咱们的 HTML，此处不作过多赘述。

<header>
    <h2>This is Header.</h2>
</header>
<section>
    <article>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </article>
</section>复制代码

使用 @media 对限制字体大小边界值

上文中说过，在咱们的屏幕宽度小于 600px 的时候，字体大小为 1.4rem，屏幕宽度大于 1200px 的时候，字体大小为 1.8rem。这个功能实现起来很简单，只须要应用相应的一小段媒体查询就好了。

@media (min-width: $max-screen) {
    article {
        font-size: $max-font-size;
    }
}

@media (max-width: $min-screen) {
    article {
        font-size: $min-font-size;
    }
}复制代码

OK，就这么一段代码，咱们就能够将字体大小的边界值进行限制。在屏幕宽度小于或者大于对应的屏幕宽度值的时候，咱们的字体大小都会保持在一个恒定的值。

那么，边界限制作好了，接下来就是要实现真正的响应式了。怎么说呢？咱们要让咱们的 font-size 在 600px ~ 1200px 的屏幕宽度范围内平滑的变化。固然，这还不够，并非说，只是给 font-size 设置一个百分比或者任何其余的相对单位，而后让这个字体可以在放大缩小屏幕的同时也可以放大缩小。咱们要作的，是要经过精确的大小控制来实现响应式。

使用 calc 函数实现字体大小的响应式

仔细看看上文中对字体大小边界值的限制的代码，已经有两个 @media 了，在这个部分，咱们确定还要加一个 @media，是否是显得有点多余？因此，咱们能够稍微精简一下。

article {
    font-size: $min-font-size;
}

@media (min-width: $min-screen) and (max-width: $max-screen) {
    // ...
}

@media (min-width: $max-screen) {
    article {
        font-size: $max-font-size;
    }
}复制代码

只要两个 @media 其实就够了。对于不在媒体查询范围内的，只须要设置一个默认值就好了。可是，要注意的是，这个默认值必定要写在两个媒体查询规则的前面。不然，会因为 CSS 的层叠的特性，后声明的样式会覆盖掉先声明的样式，从而致使媒体查询规则不起做用。

那么，要实如今这个屏幕宽度范围内精确平滑的变化，确定须要用到一点数学计算。

一、font-size 变化的范围是 1.8rem - 1.4rem = 0.4rem；

二、屏幕宽度的变化范围是 1200px - 600px = 600px；

三、最小的 font-size 是 1.4rem。那么，屏幕宽度只要大于 600px，这个值确定会增长，同时，只要屏幕宽度达到 1200px，这个值也达到 1.8rem，而后便再也不变化；

能够看下图：

好比，咱们如今有三种屏幕宽度，分别是 600px，1000px，1200px。那么，仔细观察左边的参考线，咱们将最小的那个屏幕宽度去掉，至关于就剩下了两个值，一个是 a，一个是 b。

因为 1200px 是咱们设置的屏幕宽度的最大值，那么，也就是说，b 的变化范围最大也就是 a 的长度。通俗一点说就是，能够把 a 和 b 当作进度条，a 为 100% 的长度，b 为不断增长或者减小的长度。因此，这里就存在了一个比例值，当 b 为 0 的时候，这个比例也为 0，当 b 为 100% 的时候，这个比例就是 1。

那么，按照这样的思路，转换到对应 font-size 的变化：变化范围是 0.4rem，这是分母，那么，分子该如何计算呢？咱们怎么知道字体增长了多少呢？

此处确定是没有减小的。咱们是在 600px ~ 1200px 之间变化的，最小的字体为 1.4rem，不管怎么算，字体大小都不会再减少了。

因此，此处还有一个小小的转换。想想，咱们变化的不仅是字体大小，还有屏幕宽度也在变化。因此，就像图片解释的那样，可使用屏幕宽度的计算来获得一个相应的比例，而后，乘以 font-size 的变化范围 0.4rem，就能够获得咱们增长的字体大小了。而后，在最小 font-size 的基础之上加上这个变化的范围，就能够获得在对应屏幕宽度下的精准的 font-size了。

因此，使用 calc 能够这样写：

@media (min-width: $min-screen) and (max-width: $max-screen) {
    article {
        font-size: calc($min-font-size + (1.8 - 1.4) * ((100vw - $min-screen) / (1200 - 600)));
    }
}复制代码

注意，calc 函数在计算除法的时候，/ 右边只能是数字，不能带单位。* 要求至少一个参数是数字。

对这个式子我也解释一下，能够看到，其中有个表达式是 100vw - 600px，这是什么意思呢？

转换成文字：浏览器可视区域的宽度减去最小宽度。

其实理解起来很简单，举个例子：假设如今屏幕宽度为 1000px，那么，100vw - 600px 获得的结果为 400px，而后，除以 600，最后获得的是 2 / 3。而后，这个值去乘以 0.4rem，那么，这样就能计算出增长的字体大小值了，而后加上 1.4rem，就能获得最终的一个 font-size了。

因此，就这样，咱们就对 font-size 实现了响应式。不用再经过各类屏幕大小的媒体查询来变化了。

值得庆幸的是，此规则对于 line-height 一样适用。

如下是完整的 SCSS 代码：

$min-font-size: 1.4rem;
$max-font-size: 1.8rem;
$min-screen: 600px;
$max-screen: 1200px;

:root {
    font-size: 10px;
}

article {
    font-size: $min-font-size;
}

@media (min-width: $min-screen) and (max-width: $max-screen) {
    article {
        font-size: calc($min-font-size + (2 - 1.4) * ((100vw - $min-screen) / (1200 - 800)));
    }
}

@media (min-width: $max-screen) {
    article {
        font-size: $max-font-size;
    }
}复制代码

---

References

Precise control over responsive typography

Flexible typography with CSS locks