RFS
Bootstrapi suuruse muutmise mootor skaleerib reageerivalt ühiseid CSS-i atribuute, et kasutada paremini ära vaateavade ja seadmete vaba ruumi.
Mis on RFS?
Bootstrapi kõrvalprojekt RFS on üksuse suuruse muutmise mootor, mis töötati algselt välja fondi suuruse muutmiseks (seega selle lühend sõnadest Responsive Font Sizes). Tänapäeval suudab RFS enamiku CSS-i atribuute skaleerida ümber ühikuväärtustega nagu margin
, padding
, border-radius
, või isegi box-shadow
.
Mehhanism arvutab automaatselt sobivad väärtused brauseri vaateava mõõtmete põhjal. See kompileeritakse calc()
funktsioonideks koos vaateava üksuste kombinatsiooniga, rem
et võimaldada reageerivat skaleerimiskäitumist.
RFS-i kasutamine
Miksinid sisalduvad Bootstrapis ja on saadaval pärast Bootstrapi lisamist scss
. Vajadusel saab RFS-i installida ka iseseisvalt .
Segude kasutamine
Miksinis rfs()
on stenogrammid font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, ja padding-left
. Allolevast näitest leiate Sassi lähtekoodi ja kompileeritud CSS-i.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Mis tahes muud atribuuti saab rfs()
mikserile edasi anda järgmiselt:
.selector {
@include rfs(4rem, border-radius);
}
!important
saab lisada ka soovitud väärtusele:
.selector {
@include padding(2.5rem !important);
}
Funktsioonide kasutamine
Kui te ei soovi kaasasi kasutada, on olemas ka kaks funktsiooni:
rfs-value()
teisendab väärtuse väärtuseks,rem
kuipx
väärtus on edastatud, muudel juhtudel tagastab sama tulemuse.rfs-fluid-value()
tagastab väärtuse muutuva versiooni, kui atribuut vajab skaleerimist.
Selles näites kasutame üht Bootstrapi sisseehitatud reageerivat katkestuspunktide segu , et rakendada stiili ainult lg
katkestuspunktist allpool.
.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 */
}
}
Laiendatud dokumentatsioon
RFS on eraldi projekt Bootstrapi organisatsiooni all. Lisateavet RFS-i ja selle konfiguratsiooni kohta leiate selle GitHubi hoidlast .