Spring til hovedindhold Spring til dokumentnavigation
Check

Bootstraps resizing-motor skalerer almindeligt CSS-egenskaber responsivt for bedre at udnytte tilgængelig plads på tværs af visningsporte og enheder.

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 .