RFS

什麼是 RFS？

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

此機制會根據瀏覽器視窗的大小自動計算適當的值。它會編譯成 calc() 函式，並結合 rem 和視窗單位，以啟用回應式調整大小行為。

使用 RFS

混入包含在 Bootstrap 中，只要包含 Bootstrap 的 scss 即可使用。如果需要，也可以獨立安裝 RFS。

使用混入

rfs() 混入有 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() 混入

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

!important 也可以只新增到你想要的任何值

.selector {
  @include padding(2.5rem !important);
}

使用函式

當你不想使用包含時，還有兩個函式

• rfs-value() 會將值轉換成 rem 值，如果傳遞 px 值，在其他情況下則會傳回相同的結果。
• 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 是 Bootstrap 組織下的獨立專案。可以在其GitHub 儲存庫中找到更多關於 RFS 及其組態的資訊。