css - Bootstrap 4 : How Can I Set $font-size-base for Different Monitor Sizes using Responsive Font Sizing?

Question

我在我的 Ruby on Rails 应用程序(版本 4.3.1)中使用 Bootstrap gem。我最近发现了响应式字体大小功能 (rfs)。根据 Bootstrap 文档，它刚刚在 4.3 版中可用。

Bootstrap RFS Documentation

RFS Documentation from GitHub

我找不到任何关于如何使用 gem 实现它的文档。这是我到目前为止所做的。

应用程序/ Assets /javascripts/application.js

//= require bootstrap

我已经启用了 rfs，如下所示。

$enable-responsive-font-sizes: true;

$font-size-base 中的默认字体大小设置为 1rem(16px，差不多)。

我通常在我的样式表中为不同的显示器设置默认字体大小，就像这样。

body, html { font-size: 14px; font-family: Arial; }
@media screen and (min-width: 769px) and (max-width: 1239px) { body, html { font-size: 16px; } }
@media screen and (min-width: 1240px) and (max-width: 1999px) { body, html { font-size: 18px; } }
@media screen and (min-width: 2000px) { body, html { font-size: 20px; } }

根据我正在阅读的内容，我不应该再这样做了。有了这个新功能，设置 $font-size-base 是如何工作的？该值应该设置为所需的最大字体大小(在我的示例中为 20px)还是最小的？我问是因为 Bootstrap 在第 3 版中首先开始移动。我认为所有其他默认值都应该适用于我的网站。

Bootstrap Gem Variables

由于这是一项新功能，我还没有找到任何实现此功能的人提供的任何信息。它看起来像是对 Bootstrap 的一个很好的补充。一旦我理解了 $font-size-base 如何与 rfs 一起工作，我就可以从我的样式表中删除大量 CSS 代码。

Answer 1

一切都在 RFS repository 中描述.

您设置了最大的字体大小。当视口(viewport)大于 1200px 时将应用它。当视口(viewport)较小时，字体大小会自动重新缩放。因此，如果您有以下代码:

element { font-size: 20px; }

您必须将其替换为:

element { font-size: font-size(20px); }

实现和默认选项可以在 bootstrap gem 中的 RFS 源代码中找到:link .

然后，您不必使用 $font-size-base，而是使用 $rfs-base-font-size。