RFS e le

RFS ke eng?

Bootstrap o lehlakore porojeke e ne RFS ke unit trust resizing enjene e leng qalong e ne e ntshetswa pele ho fetola boholo ba fonte boholo (ka hona e le khutsufatso ea eona bakeng sa Responsive Font Sizes). Matšatšing a lehono RFS e kgona go lekanyetša gape bontši bja dithoto tša CSS ka dikelo tša yuniti tša go swana le margin, padding, border-radius, goba gaešita le box-shadow.

Mokgwa o bala ka go iketla dikelo tša maleba go ya ka ditekanyo tša lefelo la go lebelela la sephephediši. E tla kgoboketšwa go ba calc()mešomo yeo e nago le motswako wa remle diyuniti tša viewport go kgontšha boitshwaro bja go lekanya bjo bo arabelago.

Go diriša RFS

Di-mixin di akaretšwa go Bootstrap gomme di hwetšagala ge o šetše o akaretša Bootstrap's scss. RFS e ka hlongwa gape e ikemetše ge e ba go nyakega.

Go diriša di- mixin

rfs()Mixin e na le dikhutsofatšo tša , font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomle padding-left. Bona mohlala ka tlase bakeng sa mohlodi Sass le CSS e kgobokeditšwego.

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

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

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

Thepa efe goba efe ye nngwe e ka fetišetšwa go rfs()mixin ka tsela ye:

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

!importantgape e ka no okeletšwa go boleng le ge e le bofe bjo o bo nyakago:

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

Go šomiša mešomo

Ge o sa nyake go šomiša di akaretša, go na le gape le mešomo ye mebedi:

• rfs-value()e fetolela boleng go remboleng ge pxboleng bo fetišwa, maemong a mangwe bo bušetša sephetho se se swanago.
• rfs-fluid-value()e bušetša phetolelo ya seela ya boleng ge e le gore thepa e nyaka go lekanywa gape.

Mohlaleng wo, re diriša e nngwe ya di- mixin tša ntlha ya go kgaotša tšeo di arabelago tšeo di agetšwego ka gare tša Bootstrap go diriša feela setaele ka tlase ga ntlha ya go lgkgaotša.

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

Ditokomane tše di katološitšwego

RFS ke projeke e arohaneng tlas'a mokgatlo wa Bootstrap. Tse dingwe ka ga RFS le peakanyo ya yona di ka hwetšwa polokelong ya yona ya GitHub .