这么多文章讲述了如何布局和使用响应式网站 CSS 如何实现，如何实现 Blah Blah 的。然而，我们都忘记了对字体大小的响应控制是非常重要的。
现在很多网站，从布局上来说，虽然是响应式的(当然可以说是所谓的响应式)。然而，从字体上看，它不一定是响应性的。虽然每个网站都可以通过某种方式(如频繁使用) @media )让你的网站在不同的屏幕大小下显示不同大小的字体，但这不能被称为响应，这只是一种适应性的做法。
那么，我们如何对待我们呢？ font-size 实现真正的响应式呢？
我们主要需要做以下两件事：
1、为我们制定最大和最小的屏幕宽度值 font-size 它应该在屏幕范围内平稳均匀地变化；不可能不断地改变字体的大小。想象一下，你一直在缩小或方法浏览器，字体一直在变小或变大。
2、制定最大最小的 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>Web前端之家</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 层叠的特点，后声明的风格会覆盖先声明的风格，导致媒体查询规则无效。
所以，要在这个屏幕宽度范围内实现精确平滑的变化，必须使用一点数学计算。
1、font-size 变化的范围是 1.8rem - 1.4rem = 0.4rem；
2、屏幕宽度的变化范围是 1200px - 600px = 600px；
3、最小的 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)));
}
}
注意， 函数在计算除法时， 右边只能是数字，不能带单位。 至少要求一个参数是数字。
我也解释了这个公式，你可以看到其中一个表达式是 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;
}
}
