RFS

Co je RFS?

Bootstrapův vedlejší projekt RFS je modul pro změnu velikosti jednotek, který byl původně vyvinut pro změnu velikosti písma (odtud jeho zkratka pro Responsive Font Sizes). V současné době je RFS schopen změnit měřítko většiny vlastností CSS s hodnotami jednotek jako margin, padding, border-radius, nebo dokonce box-shadow.

Mechanismus automaticky vypočítá příslušné hodnoty na základě rozměrů výřezu prohlížeče. Bude zkompilován do calc()funkcí s kombinací jednotek rema jednotek zobrazení, aby bylo možné reagovat na změnu měřítka.

Pomocí RFS

Mixiny jsou součástí Bootstrapu a jsou dostupné, jakmile zahrnete Bootstrap's scss. RFS lze v případě potřeby nainstalovat i samostatně .

Pomocí mixinů

Mixin rfs()má zkratky pro font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottoma padding-left. Podívejte se na příklad níže pro zdrojový Sass a zkompilovaný CSS.

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

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

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

Jakákoli jiná vlastnost může být předána rfs()mixinu takto:

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

!importantlze také přidat k jakékoli hodnotě, kterou chcete:

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

Použití funkcí

Pokud nechcete používat zahrnuté, existují také dvě funkce:

• rfs-value()převede hodnotu na remhodnotu, pokud je pxhodnota předána, v ostatních případech vrátí stejný výsledek.
• rfs-fluid-value()vrátí proměnlivou verzi hodnoty, pokud vlastnost potřebuje změnit měřítko.

V tomto příkladu používáme jeden z integrovaných responzivních mixů bodů přerušení Bootstrap k použití stylů pouze pod bodem lgpřerušení.

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

Rozšířená dokumentace

RFS je samostatný projekt pod organizací Bootstrap. Více o RFS a jeho konfiguraci najdete na jeho úložišti GitHub .