RFS

Kio estas RFS?

La flankprojekto RFS de Bootstrap estas unuo-regrandigo-motoro kiu estis komence evoluigita por regrandigi tipargrandojn (tial ĝia mallongigo por Responsive Font Sizes). Nuntempe RFS kapablas reskali la plej multajn CSS-ecojn kun unuvaloroj kiel margin, padding, border-radius, aŭ eĉ box-shadow.

La mekanismo aŭtomate kalkulas la taŭgajn valorojn surbaze de la dimensioj de la retumila vidfenestro. Ĝi estos kompilita en calc()funkciojn kun miksaĵo de remkaj vidportunuoj por ebligi la respondeman skalkonduton.

Uzante RFS

La miksaĵoj estas inkluzivitaj en Bootstrap kaj disponeblas post kiam vi inkluzivas Bootstrap's scss. RFS ankaŭ povas esti instalita memstare se necese.

Uzante la miksaĵojn

La rfs()miksaĵo havas stenografiojn por font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, kaj padding-left. Vidu la ekzemplon malsupre por fonto Sass kaj kompilita CSS.

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

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

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

Ajna alia posedaĵo povas esti transdonita al la rfs()miksaĵo jene:

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

!importantankaŭ povas nur esti aldonita al kia ajn valoro vi volas:

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

Uzante la funkciojn

Kiam vi ne volas uzi la inkludojn, ekzistas ankaŭ du funkcioj:

• rfs-value()konvertas valoron en remvaloron se pxvaloro estas transdonita, en aliaj kazoj ĝi resendas la saman rezulton.
• rfs-fluid-value()resendas la fluidan version de valoro se la posedaĵo bezonas reskalon.

En ĉi tiu ekzemplo, ni uzas unu el la enkonstruitaj respondemaj romppunktomiksaĵoj de Bootstrap por nur apliki stilon sub la lgromppunkto.

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

Plilongigita dokumentado

RFS estas aparta projekto sub la organizo Bootstrap. Pli pri RFS kaj ĝia agordo troveblas sur ĝia GitHub-deponejo .