Bootstrap5 RFS

Bootstrap 的大小調(diào)整引擎響應(yīng)性地縮放常見(jiàn)的 CSS 屬性，以更好地利用跨視口和設(shè)備的可用空間。

什么是RFS？

Bootstrap 的副項(xiàng)目RFS是一個(gè)單位大小調(diào)整引擎，最初開發(fā)用于調(diào)整字體大?。ㄋ娜Q為 Responsive Font Sizes）。如今，RFS能夠使用諸如?margin?，?padding?，?border-radius?，或甚?box-?shadow??等單位值重新縮放大多數(shù)CSS屬性。

該機(jī)制會(huì)根據(jù)瀏覽器視口的尺寸自動(dòng)計(jì)算適當(dāng)?shù)闹?。它將被編譯成?calc（）?函數(shù)，混合使用?rem?和視口單位，以實(shí)現(xiàn)響應(yīng)縮放行為。

使用 RFS

mixin包含在Bootstrap中，一旦包含Bootstrap的?scss?，mixin就可以使用。如果需要，RFS也可以獨(dú)立安裝。

使用mixin

?rfs()?的mixin具有?font-size?，?margin?，?margin-top?，?margin-right?，?margin-bottom?，?margin-left?，?padding?，?padding-top?，?padding-right?，?padding-bottom?和?padding-left?的縮寫。有關(guān)源 ?Sass ?和編譯的 CSS，請(qǐng)參見(jiàn)下面的示例。

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

使用功能

當(dāng)您不想使用?include?時(shí)，還有兩種方法：

• ?rfs-value()? 如果傳遞px值，則將值轉(zhuǎn)換為rem值，在其他情況下，它返回相同的結(jié)果。
• ?rfs-fluid-value()? 如果屬性需要重新縮放，則返回值的流體版本。

在此示例中，我們使用 Bootstrap 的內(nèi)置響應(yīng)斷點(diǎn)混合宏，僅在lg斷點(diǎn)下方應(yīng)用樣式。

.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 */
  }
}

擴(kuò)展文檔

RFS 是 Bootstrap 組織下的一個(gè)單獨(dú)項(xiàng)目。有關(guān) RFS 及其配置的更多信息，請(qǐng)參見(jiàn)其GitHub 存儲(chǔ)庫(kù)。