RFS

什么是 RFS?

Bootstrap的副项目RFS 是一个单位大小调整引擎，最初是为了调整字体大小而开发的（因此它的缩写为响应式字体大小）。如今，RFS 能够使用margin、padding、border-radius甚至box-shadow等单位值重新缩放大多数 CSS 属性。

该机制根据浏览器视口的尺寸自动计算适当的值。它将被编译为calc()函数，混合使用rem 和视口单位，以实现响应式缩放行为。

使用 RFS

mixins 包含在 Bootstrap 中，一旦包含 Bootstrap 的scss，就可以使用。如果需要，RFS 也可以 独立安装。

使用 mixins

rfs()mixin 有 font-size、 margin、margin-top、margin-right、margin-bottom、margin-left、padding、padding-top、padding-right、padding-bottom和padding-left的简写。请参阅下面的示例以获取源代码 Sass 和编译的 CSS。

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

任何其他属性都可以像这样传递给 rfs() mixin：

.selector {
  @include rfs(4rem, border-radius);
}

!important 也可以添加到您想要的任何值中：

.selector {
  @include padding(2.5rem !important);
}

使用函数

当您不想使用包含时，还有两个函数：

• 如果传递了px 值，则rfs-value()将值转换为rem值，在其他情况下，它返回相同的结果。
• rfs-fluid-value() 返回值的流体版本，如果属性需要重新缩放。

在这个例子中，我们使用 Bootstrap 的内置 响应式断点混合 来仅应用lg断点下方的样式。

.selector {
  @include media-breakpoint-down(lg) {
    padding: rfs-fluid-value(2rem);
    font-size: rfs-fluid-value(1.125rem);
  }
}

@media (max-width: 991.98px) {
  .selector {
    padding: calc(1.325rem + 0.9vw);
    font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
  }
}

扩展文档

RFS是Bootstrap组织下的一个独立项目。有关RFS及其配置的更多信息可以在其GitHub存储库上找到。