时间戳

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

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

问题描述

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

引导 RFS 文档

来自 GitHub 的 RFS 文档

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

应用程序/资产/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 中首先开始移动。我认为所有其他默认值都应该适用于我的网站。

引导 Gem 变量

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

标签： cssruby-on-railsfontsbootstrap-4font-size

解决方案

RFS 存储库中描述了所有内容。

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

element { font-size: 20px; }

您必须将其替换为：

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

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

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

推荐阅读