RFS
Bootstrap lieluma maiņas programma reaģējoši mērogo kopējos CSS rekvizītus, lai labāk izmantotu pieejamo vietu skatvietās un ierīcēs.
Kas ir RFS?
Bootstrap sānu projekts RFS ir vienības izmēru maiņas programma, kas sākotnēji tika izstrādāta, lai mainītu fontu izmērus (tātad tā saīsinājums no responsive Font Sizes). Mūsdienās RFS spēj mainīt lielāko daļu CSS rekvizītu ar vienību vērtībām, piemēram margin
, padding
, border-radius
, vai pat box-shadow
.
Mehānisms automātiski aprēķina atbilstošās vērtības, pamatojoties uz pārlūkprogrammas skata loga izmēriem. Tas tiks apkopots calc()
funkcijās ar rem
skatu loga vienību kombināciju, lai nodrošinātu atsaucīgu mērogošanas darbību.
Izmantojot RFS
Sajaukumi ir iekļauti Bootstrap un ir pieejami, tiklīdz ir iekļauti Bootstrap's scss
. Ja nepieciešams, RFS var instalēt arī atsevišķi .
Izmantojot maisījumus
Sajaukšanai rfs()
ir saīsinājumi font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, un padding-left
. Skatiet tālāk redzamo piemēru par Sass avotu un kompilēto CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Jebkuru citu īpašumu var nodot rfs()
miksējam šādi:
.selector {
@include rfs(4rem, border-radius);
}
!important
var arī vienkārši pievienot jebkurai vēlamajai vērtībai:
.selector {
@include padding(2.5rem !important);
}
Izmantojot funkcijas
Ja nevēlaties izmantot komplektus, ir arī divas funkcijas:
rfs-value()
pārvērš vērtību vērtībā,rem
japx
vērtība tiek nodota, citos gadījumos atgriež to pašu rezultātu.rfs-fluid-value()
atgriež vērtības mainīgo versiju, ja rekvizīts ir jāpārmēro.
Šajā piemērā mēs izmantojam vienu no Bootstrap iebūvētajiem adaptīvajiem pārtraukuma punktu miksiem , lai piemērotu stilu tikai zem lg
pārtraukuma punkta.
.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 */
}
}
Paplašināta dokumentācija
RFS ir atsevišķs projekts Bootstrap organizācijā. Vairāk par RFS un tā konfigurāciju var atrast tās GitHub repozitorijā .