RFS
所有通用表單控件，設(shè)計(jì)為一致性
什么是RFS？
BBootstrap的附帶項(xiàng)目RFS是一個(gè)單元的縮放調(diào)整引擎，最初是為了調(diào)整字體大小而開發(fā)的（因此縮寫為Responsive Font Sizes）。如今RFS能夠使用單位數(shù)值來縮放大多數(shù)的CSS屬性，諸如margin、padding、border-radius、甚至box-shadow等。
該機(jī)制會(huì)根據(jù)瀏覽器視窗的尺寸自動(dòng)計(jì)算適當(dāng)?shù)闹怠Ｋ鼘⑹褂胷em和視窗單位組合編譯為calc（）的函數(shù)，啟用響應(yīng)式的縮放行為。
使用RFS
mixin被包含在Bootstrap中，且只要包含Bootstrap的scss就可以使用這些mixin。如果有需要也可以獨(dú)立安裝 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);
}
使用函數(shù)
當(dāng)你不想使用include時(shí)，這里還有二個(gè)函數(shù)：
rfs-value（）會(huì)將數(shù)值轉(zhuǎn)換為rem值，如果傳遞進(jìn)函式的數(shù)值為px的話。在其他情況下，它將返回相同的結(jié)果。rfs-fluid-value（）會(huì)返回fluid版本的數(shù)值，如果屬性需要重新縮放的話。
在此示例中，我們使用Bootstrap內(nèi)置的響應(yīng)式斷點(diǎn)mixins之一來應(yīng)用在lg斷點(diǎn).
.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是Boostrap組織下的一個(gè)單獨(dú)項(xiàng)目，更多有關(guān)于RFS的相關(guān)配置與信息，請(qǐng)參見其GitHub repository。