RFS

What is RFS?什么是RFS？

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). Bootstrap的side项目RFS是一个单元大小调整引擎，最初是为了调整字体大小而开发的（因此它是响应字体大小的缩写）。Nowadays RFS is capable of rescaling most CSS properties with unit values like margin, padding, border-radius, or even box-shadow.如今，RFS能够使用诸如margin、padding、border-radius甚至box-shadow等单位值重新缩放大多数CSS属性。

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.它将被编译成calc()函数，混合使用rem和视口单位，以实现响应缩放行为。

Using RFS使用RFS

The mixins are included in Bootstrap and are available once you include Bootstrap’s scss. 杂合体包含在Bootstrap中，一旦包含Bootstrap的scss，杂合体就可以使用。RFS can also be installed standalone if needed.如果需要，RFS也可以独立安装。

Using the mixins使用杂合体

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. rfs()杂合体具有font-size、margin、margin-top、margin-right、margin-bottom、margin-left、padding、padding-top、padding-right、padding-bottom和padding-left的缩写。See the example below for source Sass and compiled CSS.有关源SASS和已编译的CSS，请参阅下面的示例。

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

.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}

Any other property can be passed to the rfs() mixin like this:任何其他属性都可以像这样传递到rfs()杂合体：

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

!important can also just be added to whatever value you want:可以将!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() converts a value into a rem value if a px value is passed, in other cases it returns the same result.如果传递px值，则rfs-value()将值转换为rem值，在其他情况下，它返回相同的结果。
• rfs-fluid-value() returns the fluid version of a value if the property needs rescaling.如果属性需要重新缩放，rfs-fluid-value()返回值的流体版本。

In this example, we use one of Bootstrap’s built-in responsive breakpoint mixins to only apply styling below the lg breakpoint.在本例中，我们使用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 */
}
}

Extended documentation扩展文档

RFS is a separate project under the Bootstrap organization. RFS是Bootstrap组织下的一个单独项目。More about RFS and its configuration can be found on its GitHub repository.有关RFS及其配置的更多信息可以在其GitHub存储库中找到。