RFS

Ce este RFS?

Proiectul secundar al Bootstrap RFS este un motor de redimensionare a unităților care a fost dezvoltat inițial pentru a redimensiona dimensiunile fonturilor (de unde abrevierea sa pentru Responsive Font Sizes). În zilele noastre, RFS este capabil să rescaleze majoritatea proprietăților CSS cu valori unitare precum margin, padding, border-radius, sau chiar box-shadow.

Mecanismul calculează automat valorile adecvate pe baza dimensiunilor ferestrei de vizualizare a browserului. Acesta va fi compilat în calc()funcții cu un amestec de remunități de vizualizare și pentru a permite comportamentul de scalare receptiv.

Folosind RFS

Mixurile sunt incluse în Bootstrap și sunt disponibile odată ce le includeți pe Bootstrap scss. RFS poate fi, de asemenea, instalat independent dacă este necesar.

Folosind mixinele

Mixinul rfs()are prescurtarea pentru font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, și padding-left. Vezi exemplul de mai jos pentru Sass sursă și CSS compilat.

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

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

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

Orice altă proprietate poate fi transmisă rfs()mixin-ului astfel:

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

!importantpoate fi adăugată la orice valoare doriți:

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

Utilizarea funcțiilor

Când nu doriți să utilizați includerile, există și două funcții:

• rfs-value()convertește o valoare într-o remvaloare dacă o pxvaloare este transmisă, în alte cazuri returnează același rezultat.
• rfs-fluid-value()returnează versiunea fluidă a unei valori dacă proprietatea necesită redimensionare.

În acest exemplu, folosim unul dintre mixurile de puncte de întrerupere receptive încorporate din Bootstrap pentru a aplica doar stilul sub punctul de lgîntrerupere.

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

Documentație extinsă

RFS este un proiect separat în cadrul organizației Bootstrap. Mai multe despre RFS și configurația sa pot fi găsite în depozitul său GitHub .