RFS

Kaj je RFS?

Bootstrapov stranski projekt RFS je mehanizem za spreminjanje velikosti enote, ki je bil prvotno razvit za spreminjanje velikosti pisav (od tod tudi okrajšava za odzivne velikosti pisav). Dandanes je RFS sposoben spremeniti velikost večine lastnosti CSS z vrednostmi enot, kot marginso padding, border-radius, ali celo box-shadow.

Mehanizem samodejno izračuna ustrezne vrednosti glede na dimenzije vidnega polja brskalnika. Preveden bo v calc()funkcije z mešanico enot remin enot pogleda, da se omogoči odzivno spreminjanje velikosti.

Uporaba RFS

Miksini so vključeni v Bootstrap in so na voljo, ko vključite Bootstrapov scss. RFS lahko po potrebi namestite tudi samostojno .

Uporaba miksinov

Mixin ima rfs()okrajšave za font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, in padding-left. Oglejte si spodnji primer za izvorni Sass in preveden CSS.

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

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

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

Katera koli druga lastnost se lahko posreduje rfs()miksinu takole:

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

!importantlahko dodate tudi kateri koli vrednosti, ki jo želite:

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

Uporaba funkcij

Ko ne želite uporabljati vključenosti, sta na voljo tudi dve funkciji:

• rfs-value()pretvori vrednost v remvrednost, če je pxvrednost posredovana, v drugih primerih pa vrne enak rezultat.
• rfs-fluid-value()vrne tekočo različico vrednosti, če je treba lastnost prilagoditi velikosti.

V tem primeru uporabljamo enega od Bootstrapovih vgrajenih odzivnih mešanic prekinitvene točke, da uporabimo samo slog pod lgtočko prekinitve.

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

Razširjena dokumentacija

RFS je ločen projekt v okviru organizacije Bootstrap. Več o RFS in njegovi konfiguraciji lahko najdete v njegovem repozitoriju GitHub .