RFS

什么是 RFS？

🌐 What is RFS?

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

🌐 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.

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

🌐 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

这些 mixin 已包含在 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() 混入有 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() 混入：

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

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

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

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

使用函数

🌐 Using the functions

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

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

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

在这个例子中，我们使用了 Bootstrap 内置的一个 响应式断点 mixin 来仅在 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.