3、最小的 font-size 是 1.4rem。那么，屏幕宽度只要大于 600px，atv，这个值肯定会增加，同时，只要屏幕宽度达到 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 可以这样写：

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

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

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

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

　　所以，就这样，我们就对 font-size 实现了响应式。不用再通过各种屏幕大小的媒体查询来变化了。

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

　　以下是完整的 SCSS 代码：

　　参考链接

Precise control over responsive typography

Flexible typography with CSS locks

　　Ta曾经还分享过：