RFS

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 remog 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);
}

!importantkan 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 en remverdi hvis en pxverdi 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 lgbruddpunktet.

.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 .