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

Question

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

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

app/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 中描述。

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

element { font-size: 20px; }

您必须将其替换为：

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

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

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

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

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

css

fonts

ruby-on-rails

font-size

bootstrap-4