RFS

Kas ir RFS?

Bootstrap sānu projekts RFS ir vienības izmēru maiņas programma, kas sākotnēji tika izstrādāta, lai mainītu fontu izmērus (tātad tā saīsinājums no responsive Font Sizes). Mūsdienās RFS spēj mainīt lielāko daļu CSS rekvizītu ar vienību vērtībām, piemēram margin, padding, border-radius, vai pat box-shadow.

Mehānisms automātiski aprēķina atbilstošās vērtības, pamatojoties uz pārlūkprogrammas skata loga izmēriem. Tas tiks apkopots calc()funkcijās ar remskatu loga vienību kombināciju, lai nodrošinātu atsaucīgu mērogošanas darbību.

Izmantojot RFS

Sajaukumi ir iekļauti Bootstrap un ir pieejami, tiklīdz ir iekļauti Bootstrap's scss. Ja nepieciešams, RFS var instalēt arī atsevišķi .

Izmantojot maisījumus

Sajaukšanai rfs()ir saīsinājumi font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, un padding-left. Skatiet tālāk redzamo piemēru par Sass avotu un kompilēto CSS.

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

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

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

Jebkuru citu īpašumu var nodot rfs()miksējam šādi:

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

!importantvar arī vienkārši pievienot jebkurai vēlamajai vērtībai:

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

Izmantojot funkcijas

Ja nevēlaties izmantot komplektus, ir arī divas funkcijas:

• rfs-value()pārvērš vērtību vērtībā, remja pxvērtība tiek nodota, citos gadījumos atgriež to pašu rezultātu.
• rfs-fluid-value()atgriež vērtības mainīgo versiju, ja rekvizīts ir jāpārmēro.

Šajā piemērā mēs izmantojam vienu no Bootstrap iebūvētajiem adaptīvajiem pārtraukuma punktu miksiem , lai piemērotu stilu tikai zem lgpārtraukuma punkta.

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

Paplašināta dokumentācija

RFS ir atsevišķs projekts Bootstrap organizācijā. Vairāk par RFS un tā konfigurāciju var atrast tās GitHub repozitorijā .