RFS

什麼是 RFS?

Bootstrap 的附帶項目 RFS 是一個單元的縮放調整引擎，最初是為了調整字體大小而開發的 (因此縮寫為 Responsive Font Sizes)。如今 RFS 能夠使用單位數值來縮放大多數的 CSS 屬性，諸如 margin、padding、border-radius、甚至 box-shadow 等。

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

使用 RFS

mixin 被包含在 Bootstrap 中，且只要包含 Bootstrap 的 scss 就可以使用這些 mixin。如果有需要也可以 獨立安裝 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);
}

使用函式

當你不想使用 include 時，這裡還有二個函式：

• rfs-value() 會將數值轉換為 rem 值，如果傳遞進函式的數值為 px 的話。在其他情況下，它將返回相同的結果。
• rfs-fluid-value() 會返回 fluid 版本的數值，如果屬性需要重新縮放的話。

在此範例中，我們使用 Bootstrap 內建的 響應式斷點 mixins 之一來應用在 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 是 Boostrap 組織下的一個單獨項目，更多有關於 RFS 的相關配置與訊息，請參見其 GitHub repository。