Bootstrap 4：如何使用响应式字体大小为不同的显示器尺寸设置 $font-size-base？答案

【问题标题】：Bootstrap 4: How Can I Set $font-size-base for Different Monitor Sizes using Responsive Font Sizing?Bootstrap 4：如何使用响应式字体大小为不同的显示器尺寸设置 $font-size-base？
【发布时间】：2019-08-07 15:36:36
【问题描述】：

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

Bootstrap RFS Documentation

RFS Documentation from GitHub

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

app/assets/javascripts/application.js

//= require bootstrap

我已启用 rfs，如下所示。

$enable-responsive-font-sizes: true;

$font-size-base 中的默认字体大小设置为 1rem（16 像素，差不多）。

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

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 代码。

【问题讨论】：

标签： css ruby-on-rails fonts bootstrap-4 font-size

【解决方案1】：

RFS repository 中描述了所有内容。

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

element { font-size: 20px; }

您必须将其替换为：

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

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

那么，您不必使用$font-size-base，而是使用$rfs-base-font-size。

【讨论】：

我习惯于将实现信息与存储库代码分开查看。我看到了元素代码，但我想在某个地方迷路了。你的重述更清楚。我将检查代码，而不期待单独的说明。假设它有效，我会这样做并检查您的答案。非常感谢。
一年多后我终于回到了这个问题上。这现在完美无缺。我只需要对 html 标签做一些调整就可以了。