RFS

什麼是 RFS？

Bootstrap 的副項目RFS是一個單位大小調整引擎，最初開髮用於調整字體大小（因此它是 Responsive Font Sizes 的縮寫）。如今，RFS 能夠使用單位值重新縮放大多數 CSS 屬性，例如margin, padding, border-radius, 甚至box-shadow。

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

使用 RFS

這些 mixin 包含在 Bootstrap 中，並且在您包含 Bootstrap 的scss. 如果需要，RFS 也可以獨立安裝。

使用混入

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

使用函數

當您不想使用包含時，還有兩個功能：

• rfs-value()rem如果px傳遞了一個值，則將一個值轉換為一個值，在其他情況下它返回相同的結果。
• 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 is small enough, so RFS won't rescale this */
  }
}

擴展文檔

RFS 是 Bootstrap 組織下的一個獨立項目。有關 RFS 及其配置的更多信息，請參見其GitHub 存儲庫。