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中描述了所有内容。

设置最大字体大小。当视口大于1200像素时，将应用它。当视口较小时，字体大小会自动重新缩放。因此，如果您具有以下代码：

element { font-size: 20px; }

您必须将其替换为：

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

实现和默认选项可以在引导宝石link中的RFS源代码中找到。

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

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

1 个答案: