RFS

Hvad er RFS?

Bootstraps sideprojekt RFS er en enhedsstørrelsesmotor, som oprindeligt blev udviklet til at ændre størrelse på skriftstørrelser (deraf dens forkortelse for Responsive Font Sizes). I dag er RFS i stand til at omskalere de fleste CSS-egenskaber med enhedsværdier som margin, padding, border-radius, eller endda box-shadow.

Mekanismen beregner automatisk de passende værdier baseret på dimensionerne af browservisningsporten. Det vil blive kompileret til calc()funktioner med en blanding af remog viewport-enheder for at aktivere den responsive skaleringsadfærd.

Brug af RFS

Mixin'erne er inkluderet i Bootstrap og er tilgængelige, når du inkluderer Bootstrap's scss. RFS kan også installeres selvstændigt , hvis det er nødvendigt.

Brug af mixins

Mixinen rfs()har stenografier for font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomog padding-left. Se eksemplet nedenfor for kilde Sass og kompileret CSS.

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

Enhver anden egenskab kan overføres til rfs()mixin som denne:

.selector {
  @include rfs(4rem, border-radius);
}

!importantkan også bare tilføjes til den værdi du ønsker:

.selector {
  @include padding(2.5rem !important);
}

Brug af funktionerne

Når du ikke ønsker at bruge inkluderer, er der også to funktioner:

• rfs-value()konverterer en værdi til en remværdi, hvis en pxværdi passeres, i andre tilfælde returnerer den det samme resultat.
• rfs-fluid-value()returnerer den flydende version af en værdi, hvis egenskaben skal omskaleres.

I dette eksempel bruger vi et af Bootstraps indbyggede responsive breakpoint mixins til kun at anvende styling under lgbreakpointet.

.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 */
  }
}

Udvidet dokumentation

RFS er et separat projekt under Bootstrap-organisationen. Mere om RFS og dens konfiguration kan findes på dets GitHub-lager .