RFS

Mis on RFS?

Bootstrapi kõrvalprojekt RFS on üksuse suuruse muutmise mootor, mis töötati algselt välja fondi suuruse muutmiseks (seega selle lühend sõnadest Responsive Font Sizes). Tänapäeval suudab RFS enamiku CSS-i atribuute skaleerida ümber ühikuväärtustega nagu margin, padding, border-radius, või isegi box-shadow.

Mehhanism arvutab automaatselt sobivad väärtused brauseri vaateava mõõtmete põhjal. See kompileeritakse calc()funktsioonideks koos vaateava üksuste kombinatsiooniga, remet võimaldada reageerivat skaleerimiskäitumist.

RFS-i kasutamine

Miksinid sisalduvad Bootstrapis ja on saadaval pärast Bootstrapi lisamist scss. Vajadusel saab RFS-i installida ka iseseisvalt .

Segude kasutamine

Miksinis rfs()on stenogrammid font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, ja padding-left. Allolevast näitest leiate Sassi lähtekoodi ja kompileeritud CSS-i.

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

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

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

Mis tahes muud atribuuti saab rfs()mikserile edasi anda järgmiselt:

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

!importantsaab lisada ka soovitud väärtusele:

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

Funktsioonide kasutamine

Kui te ei soovi kaasasi kasutada, on olemas ka kaks funktsiooni:

• rfs-value()teisendab väärtuse väärtuseks, remkui pxväärtus on edastatud, muudel juhtudel tagastab sama tulemuse.
• rfs-fluid-value()tagastab väärtuse muutuva versiooni, kui atribuut vajab skaleerimist.

Selles näites kasutame üht Bootstrapi sisseehitatud reageerivat katkestuspunktide segu , et rakendada stiili ainult lgkatkestuspunktist allpool.

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

Laiendatud dokumentatsioon

RFS on eraldi projekt Bootstrapi organisatsiooni all. Lisateavet RFS-i ja selle konfiguratsiooni kohta leiate selle GitHubi hoidlast .