RFS

什麼是 RFS？（What is RFS?）

Bootstrap 的附屬專案 RFS 是一個單位縮放引擎，最初是為了縮放字體大小而開發的（因此其縮寫為 Responsive Font Sizes）。現在 RFS 能夠縮放大多數具有單位值的 CSS 屬性，如 margin、padding、border-radius，甚至 box-shadow。

該機制會根據瀏覽器視口的尺寸自動計算適當的值。它將被編譯成 calc() 函式，混合使用 rem 和視口單位以啟用響應式縮放行為。

使用 RFS（Using RFS）

這些 mixin 包含在 Bootstrap 中，一旦您引入 Bootstrap 的 scss 即可使用。如有需要，RFS 也可以單獨安裝。

使用 mixin（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 的範例。

.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);
}

使用函式（Using the functions）

當您不想使用 include 時，還有兩個函式：

• rfs-value() 如果傳入 px 值，會將其轉換為 rem 值，其他情況則返回相同的結果。
• rfs-fluid-value() 如果屬性需要縮放，則返回值的流體版本。

在這個範例中，我們使用 Bootstrap 內建的響應式中斷點 mixin 僅在 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 足夠小，所以 RFS 不會縮放它 */
  }
}

延伸文件（Extended documentation）

RFS 是 Bootstrap 組織下的一個獨立專案。更多關於 RFS 及其設定的資訊可以在其 GitHub 儲存庫找到。