RFS

什么是 RFS？

¥What is RFS?

Bootstrap 的副项目 [RFS](https://github.com/twbs/rfs/tree/{{< param “rfs_version” >}}) 是一个单位调整大小引擎，最初开发用于调整字体大小（因此是响应式字体大小的缩写）。如今，RFS 能够使用 margin、padding、border-radius 甚至 box-shadow 等单位值重新调整大多数 CSS 属性。

¥Bootstrap’s side project [RFS](https://github.com/twbs/rfs/tree/{{< param “rfs_version” >}}) is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like margin, padding, border-radius, or even box-shadow.

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

¥The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into calc() functions with a mix of rem and viewport units to enable the responsive scaling behavior.

使用 RFS

¥Using RFS

这些 mixins 包含在 Bootstrap 中，并且在包含 Bootstrap 的 scss 后即可使用。如果需要，RFS 也可以[独立安装](https://github.com/twbs/rfs/tree/{{< param “rfs_version” >}}#installation)。

¥The mixins are included in Bootstrap and are available once you include Bootstrap’s scss. RFS can also be [installed standalone](https://github.com/twbs/rfs/tree/{{< param “rfs_version” >}}#installation) if needed.

使用 mixins

¥Using the 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。

¥The rfs() mixin has shorthands for font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, and padding-left. See the example below for source Sass and compiled CSS.

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

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

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

任何其他属性都可以传递给 rfs() mixin，如下所示：

¥Any other property can be passed to the rfs() mixin like this:

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

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

¥!important can also just be added to whatever value you want:

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

使用函数

¥Using the functions

当你不想使用 includes 时，还有两个函数：

¥When you don’t want to use the includes, there are also two functions:

• 如果传递了 px 值，则 rfs-value() 会将值转换为 rem 值，否则返回相同的结果。

  ¥rfs-value() converts a value into a rem value if a px value is passed, in other cases it returns the same result.

• 如果属性需要重新缩放，rfs-fluid-value() 将返回值的流体版本。

  ¥rfs-fluid-value() returns the fluid version of a value if the property needs rescaling.

在此示例中，我们使用 Bootstrap 的内置 响应式断点混合 之一仅应用 lg 断点下方的样式。

¥In this example, we use one of Bootstrap’s built-in responsive breakpoint mixins to only apply styling below the lg breakpoint.

.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 */
  }
}

扩展文档

¥Extended documentation

RFS 是 Bootstrap 组织下的一个独立项目。有关 RFS 及其配置的更多信息可以在其 [GitHub 存储库](https://github.com/twbs/rfs/tree/{{< param “rfs_version” >}}) 上找到。

¥RFS is a separate project under the Bootstrap organization. More about RFS and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs/tree/{{< param “rfs_version” >}}).