RFS

所有通用表單控件，設計為一致性

On this page

什么是RFS？

BBootstrap的附帶項目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。