RFS
A Bootstrap átméretező motorja érzékenyen skálázza a közös CSS-tulajdonságokat, hogy jobban kihasználja a rendelkezésre álló helyet a nézetablakokon és az eszközökön.
Mi az az RFS?
A Bootstrap oldalprojektje, az RFS egy egység-átméretező motor, amelyet eredetileg a betűméretek átméretezésére fejlesztettek ki (innen ered a Responsive Font Sizes rövidítése). Manapság az RFS képes a legtöbb CSS-tulajdonság újraskálázására olyan egységértékekkel, mint a margin
, padding
, border-radius
, vagy akár box-shadow
.
A mechanizmus automatikusan kiszámítja a megfelelő értékeket a böngésző nézetablakának méretei alapján. Funkciókká lesz összeállítva a nézetablak egységek calc()
keverékével, hogy lehetővé tegye a reagáló méretezési viselkedést.rem
RFS használata
A mixineket a Bootstrap tartalmazza, és a Bootstrap hozzáadása után elérhetők scss
. Az RFS szükség esetén önállóan is telepíthető .
A mixinek használata
A rfs()
mixinnek vannak rövidítései a font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, és padding-left
. Tekintse meg az alábbi példát a Sass forráshoz és a lefordított CSS-hez.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Bármilyen más tulajdonság átadható a rfs()
mixinnek, így:
.selector {
@include rfs(4rem, border-radius);
}
!important
tetszőleges értékhez hozzáadható:
.selector {
@include padding(2.5rem !important);
}
A funkciók használata
Ha nem szeretné használni az include-okat, két funkció is van:
rfs-value()
értéket értékké alakít át,rem
ha átad egy értéketpx
, más esetekben ugyanazt az eredményt adja vissza.rfs-fluid-value()
egy érték folyékony változatát adja vissza, ha a tulajdonságot át kell skálázni.
Ebben a példában a Bootstrap egyik beépített reszponzív töréspont-keverőjét használjuk , hogy csak a lg
töréspont alatti stílust alkalmazzuk.
.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 */
}
}
Bővített dokumentáció
Az RFS egy külön projekt a Bootstrap szervezet alatt. További információ az RFS-ről és annak konfigurációjáról a GitHub-tárhelyen található .