Twitter bootstrap 引导程序(4.3.1)的RFS(响应字体大小)未在1200px阈值下生成媒体查询

Twitter bootstrap 引导程序(4.3.1)的RFS(响应字体大小)未在1200px阈值下生成媒体查询,twitter-bootstrap,Twitter Bootstrap,我最近将项目的引导版本更新为最新版本(4.3.1)。该版本中的一个新特性是RFS()。我正在通过node_模块导入所有引导。我没有以任何方式修改RFS混音。我使用的是Bootstrap 4.3.1附带的默认配置版本。除了这个特殊的RFS问题,Bootstrap的编译还可以 RFS设计用于生成媒体查询(默认值为1200px),低于该阈值时,字体会自动向下缩放 当前环境中未生成该媒体查询。这是一个有许多依赖关系的大型项目,我正在尝试提出一个简化的测试用例。我意识到,这使得帮助我解决这个问题非常困难

我最近将项目的引导版本更新为最新版本(4.3.1)。该版本中的一个新特性是RFS()。我正在通过node_模块导入所有引导。我没有以任何方式修改RFS混音。我使用的是Bootstrap 4.3.1附带的默认配置版本。除了这个特殊的RFS问题,Bootstrap的编译还可以


RFS设计用于生成媒体查询(默认值为
1200px
),低于该阈值时,字体会自动向下缩放

当前环境中未生成该媒体查询。这是一个有许多依赖关系的大型项目,我正在尝试提出一个简化的测试用例。我意识到,这使得帮助我解决这个问题非常困难,如果不是不可能的话。但我在这一点上绝望了

此外,我相当肯定(比如说,90%)这是一个me问题,而不是RFS问题,但我无法对问题进行排序

我按如下方式调用mixin:

.my-test {
   @include rfs(3rem);
}
请注意,此字体大小大于最小字体大小1.25rem,在该大小或以下不会发生缩放。所以,这不是问题所在

我还尝试调用mixin的别名版本:

.my-test {
   @include responsive-font-size(3rem);
}

我用
rem
px
和无单位值进行了尝试

mixin肯定是被认可的,并且已经工作了一半。也就是说,它可以顺利地编译成常规CSS

因此,上面的代码确实生成了以下CSS:

.my-test {
  font-size: 3rem;
}
但是,在我当前的环境中,mixin没有生成任何媒体查询(在
1200px
),因此,在1200px阈值以下没有向下扩展

在低于
1200px
的屏幕宽度下,我希望看到类似以下内容:

@media (max-width: 1200px) {
  .my-test {
    font-size: calc(1.525rem + 3.3vw);
  }
}
但是,没有骰子

再说一遍,我没有以任何方式修改RFS mixin的默认配置,而且它在编译成CSS时似乎工作了一半

在我同事的环境中尝试,他得到了同样的结果。但是,我想这是意料之中的,因为我们有非常相似的本地环境

有人能告诉我一个方向来尝试对其进行排序吗?

解决方案:

tl;dr-RTFM

扩展解决方案:

更新引导后,我没有更新我的自定义
变量
文件。源
变量
文件的
$enable responsive font size
布尔值设置为false,我在未更新的自定义
变量
文件中没有该值。因此,我没有用
true
覆盖
false


smh.

与小修正一样。如其
$enable responsive font size
所示(您缺少最后的's'
@media (max-width: 1200px) {
  .my-test {
    font-size: calc(1.525rem + 3.3vw);
  }
}