RFS

什么是 RFS?

Bootstrap的side project RFS 是一个单元调整引擎，最初开发它是为了调整字体大小(因此它是响应式字体大小的缩写)。现在RFS能够用单位值重新调整大多数CSS属性，比如margin, padding, border-radius, 甚至 box-shadow。

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

使用 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);
}

使用函数(functions)

当你不想使用include时，还有两个函数:

• 如果传递了 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是引导组织下的一个独立项目。关于RFS及其配置的更多信息可以在其GitHub存储库中找到。