RFS
Bootstraps resizing-motor skalerer vanlige CSS-egenskaper responsivt for bedre å utnytte tilgjengelig plass på tvers av visningsporter og enheter.
Hva er RFS?
Bootstraps sideprosjekt RFS er en enhetsstørrelsesmotor som opprinnelig ble utviklet for å endre størrelse på skriftstørrelser (derav forkortelsen for Responsive Font Sizes). I dag er RFS i stand til å skalere de fleste CSS-egenskaper med enhetsverdier som margin
, padding
, border-radius
, eller til og med box-shadow
.
Mekanismen beregner automatisk de riktige verdiene basert på dimensjonene til nettleserens visningsport. Den vil bli kompilert til calc()
funksjoner med en blanding av rem
og viewport-enheter for å aktivere responsiv skaleringsatferd.
Bruker RFS
Blandingene er inkludert i Bootstrap og er tilgjengelige når du inkluderer Bootstraps scss
. RFS kan også installeres frittstående om nødvendig.
Ved å bruke blandingene
Mixinen rfs()
har forkortelser for font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, og padding-left
. Se eksemplet nedenfor for kilde Sass og kompilert CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Enhver annen egenskap kan overføres til rfs()
mixin slik:
.selector {
@include rfs(4rem, border-radius);
}
!important
kan også bare legges til den verdien du ønsker:
.selector {
@include padding(2.5rem !important);
}
Bruke funksjonene
Når du ikke vil bruke inkluderer, er det også to funksjoner:
rfs-value()
konverterer en verdi til enrem
verdi hvis enpx
verdi passeres, i andre tilfeller returnerer den samme resultat.rfs-fluid-value()
returnerer den flytende versjonen av en verdi hvis egenskapen trenger skalering på nytt.
I dette eksemplet bruker vi en av Bootstraps innebygde responsive breakpoint -mikser for kun å bruke styling under lg
bruddpunktet.
.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 */
}
}
Utvidet dokumentasjon
RFS er et eget prosjekt under Bootstrap-organisasjonen. Mer om RFS og dens konfigurasjon finner du på GitHub-depotet .