RFS

什么是 RFS？

¥What is RFS?

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

¥Bootstrap’s side project RFS 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

这些混合宏已包含在 Bootstrap 中，只要包含 Bootstrap 的 scss 即可使用。如果需要，RFS 也可以是 已安装独立组件。

¥The mixins are included in Bootstrap and are available once you include Bootstrap’s scss. RFS can also be installed standalone 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

如果你不想使用包含函数，还有两个函数可以使用：

¥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 仓库。

¥RFS is a separate project under the Bootstrap organization. More about RFS and its configuration can be found on its GitHub repository.