RFS

čo je RFS?

Bootstrap bočný projekt RFS je nástroj na zmenu veľkosti jednotiek, ktorý bol pôvodne vyvinutý na zmenu veľkosti písma (odtiaľ jeho skratka pre Responsive Font Sizes). V súčasnosti je RFS schopný zmeniť mierku väčšiny vlastností CSS s hodnotami jednotiek ako margin, padding, border-radius, alebo dokonca box-shadow.

Mechanizmus automaticky vypočíta príslušné hodnoty na základe rozmerov výrezu prehliadača. Bude skompilovaný do calc()funkcií so zmesou jednotiek rema jednotiek zobrazenia, aby sa umožnilo citlivé správanie pri škálovaní.

Pomocou RFS

Mixiny sú súčasťou Bootstrapu a sú dostupné, keď zahrniete Bootstrap's scss. RFS možno v prípade potreby nainštalovať aj samostatne .

Pomocou mixinov

Mixin rfs()má skratky pre font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottoma padding-left. Pozrite si príklad nižšie pre zdrojový Sass a kompilovaný CSS.

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

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

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

Akákoľvek iná vlastnosť môže byť odovzdaná do rfs()mixinu takto:

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

!importantmôžete tiež pridať k akejkoľvek hodnote, ktorú chcete:

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

Používanie funkcií

Ak nechcete používať zahrnuté, existujú aj dve funkcie:

• rfs-value()konvertuje hodnotu na remhodnotu, ak je pxhodnota odovzdaná, v ostatných prípadoch vráti rovnaký výsledok.
• rfs-fluid-value()vráti premenlivú verziu hodnoty, ak je potrebné zmeniť mierku vlastnosti.

V tomto príklade používame jeden zo vstavaných responzívnych mixov bodov prerušenia Bootstrap , aby sme použili štýl pod lgbodom prerušenia.

.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šírená dokumentácia

RFS je samostatný projekt pod organizáciou Bootstrap. Viac o RFS a jeho konfigurácii nájdete v jeho úložisku GitHub .