RFS

RFS ni nini?

Mradi wa upande wa Bootstrap RFS ni injini ya kubadilisha ukubwa wa kitengo ambayo ilitengenezwa hapo awali ili kurekebisha ukubwa wa fonti (kwa hivyo kifupi chake cha Saizi za Fonti Zinazojibika). Siku hizi RFS ina uwezo wa kuweka upya sifa nyingi za CSS kwa thamani za kitengo kama vile margin, padding, border-radius, au hata box-shadow.

Utaratibu huhesabu kiotomati maadili yanayofaa kulingana na vipimo vya tovuti ya kutazama ya kivinjari. Itakusanywa kuwa calc()chaguo za kukokotoa na mchanganyiko wa remvitengo na sehemu ya kutazama ili kuwezesha tabia ya mwitikio wa kuongeza viwango.

Kwa kutumia RFS

Mchanganyiko umejumuishwa kwenye Bootstrap na unapatikana mara tu unapojumuisha Bootstrap's scss. RFS pia inaweza kusakinishwa ili kujitegemea ikiwa inahitajika.

Kutumia mchanganyiko

Mchanganyiko rfs()una shorthands za font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomna padding-left. Tazama mfano hapa chini kwa chanzo Sass na CSS iliyokusanywa.

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

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

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

Mali nyingine yoyote inaweza kupitishwa kwa rfs()mchanganyiko kama hii:

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

!importantinaweza pia kuongezwa kwa thamani yoyote unayotaka:

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

Kutumia vipengele

Wakati hutaki kutumia inajumuisha, pia kuna kazi mbili:

• rfs-value()hubadilisha thamani kuwa remthamani ikiwa pxthamani itapitishwa, katika hali nyingine hurejesha matokeo sawa.
• rfs-fluid-value()hurejesha toleo la maji la thamani ikiwa mali inahitaji kuongezwa tena.

Katika mfano huu, tunatumia mojawapo ya vichanganyiko vya kuitikia vilivyojengewa ndani vya Bootstrap ili kuweka tu mtindo chini ya sehemu ya lgkukatiza.

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

Nyaraka zilizopanuliwa

RFS ni mradi tofauti chini ya shirika la Bootstrap. Zaidi kuhusu RFS na usanidi wake unaweza kupatikana kwenye hazina yake ya GitHub .