RFS

Wat is RFS?

Bootstrap se syprojek RFS is 'n eenheidsgrootte-enjin wat aanvanklik ontwikkel is om lettergroottes te verander (vandaar die afkorting vir Responsive Font Sizes). Deesdae is RFS in staat om die meeste CSS-eienskappe te herskaal met eenheidswaardes soos margin, padding, border-radius, of selfs box-shadow.

Die meganisme bereken outomaties die toepaslike waardes gebaseer op die afmetings van die blaaier-kykpoort. Dit sal saamgestel word in calc()funksies met 'n mengsel van remen viewport-eenhede om die responsiewe skaalgedrag moontlik te maak.

Gebruik RFS

Die mengsels is ingesluit in Bootstrap en is beskikbaar sodra jy Bootstrap's insluit scss. RFS kan ook selfstandig geïnstalleer word indien nodig.

Gebruik die mengsels

Die rfs()mixin het snelskrif vir font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomen padding-left. Sien die voorbeeld hieronder vir bron Sass en saamgestelde CSS.

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

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

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

Enige ander eiendom kan soos volg na die rfs()mengin oorgedra word:

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

!importantkan ook net bygevoeg word tot watter waarde jy ook al wil hê:

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

Die gebruik van die funksies

Wanneer jy nie die insluit wil gebruik nie, is daar ook twee funksies:

• rfs-value()skakel 'n waarde om in 'n remwaarde as 'n pxwaarde geslaag word, in ander gevalle gee dit dieselfde resultaat.
• rfs-fluid-value()gee die vloeibare weergawe van 'n waarde terug as die eiendom herskaal moet word.

In hierdie voorbeeld gebruik ons ​​een van Bootstrap se ingeboude responsiewe breekpuntmengsels om slegs stilering onder die lgbreekpunt toe te pas.

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

Uitgebreide dokumentasie

RFS is 'n aparte projek onder die Bootstrap-organisasie. Meer oor RFS en sy konfigurasie kan gevind word op sy GitHub-bewaarplek .