RFS

Kas yra RFS?

Šalutinis „Bootstrap“ projektas RFS yra vieneto dydžio keitimo variklis, kuris iš pradžių buvo sukurtas šrifto dydžiui keisti (taigi ir jo santrumpa, reiškianti „Responsive Font Sizes“). Šiais laikais RFS gali pakeisti daugumos CSS ypatybių mastelį su vienetų reikšmėmis, tokiomis kaip margin, padding, border-radius, arba net box-shadow.

Mechanizmas automatiškai apskaičiuoja atitinkamas reikšmes pagal naršyklės peržiūros srities matmenis. Jis bus sukompiliuotas į calc()funkcijas su remperžiūros srities ir vienetų deriniu, kad būtų galima keisti mastelį.

Naudojant RFS

Mišiniai yra įtraukti į „Bootstrap“ ir yra pasiekiami įtraukus „Bootstrap's“ scss. Jei reikia, RFS taip pat gali būti įdiegtas atskirai .

Naudojant mišinius

Mišinyje rfs()yra trumpiniai font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, ir padding-left. Žr. toliau pateiktą šaltinio Sass ir kompiliuoto CSS pavyzdį.

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

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

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

Bet kokia kita nuosavybė gali būti perduodama rfs()mišiniui taip:

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

!importanttaip pat galima tiesiog pridėti prie bet kokios norimos vertės:

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

Naudojant funkcijas

Kai nenorite naudoti įtraukimų, taip pat yra dvi funkcijos:

• rfs-value()paverčia reikšmę į remreikšmę, jei pxreikšmė perduodama, kitais atvejais grąžina tą patį rezultatą.
• rfs-fluid-value()grąžina sklandžią vertės versiją, jei reikia pakeisti nuosavybės mastelį.

Šiame pavyzdyje naudojame vieną iš „Bootstrap“ integruotų reaguojančių pertraukos taškų mišinių , kad pritaikytume stilių tik žemiau lglūžio taško.

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

Išplėstinė dokumentacija

RFS yra atskiras „Bootstrap“ organizacijos projektas. Daugiau apie RFS ir jo konfigūraciją galite rasti „ GitHub“ saugykloje .