RFS

Nukae nye RFS?

Bootstrap ƒe akpa dzi dɔ RFS nye unit resizing engine si wowɔ le gɔmedzedzea me be woatrɔ asi le ŋɔŋlɔdzesiwo ƒe lolome ŋu (eyatae wotsɔ eƒe kpukpui na Responsive Font Sizes). Fifia la RFS te ŋu trɔa asi le CSS ƒe nɔnɔme akpa gãtɔ ŋu kple unit values ​​abe margin, padding, border-radius, alo gɔ̃ hã box-shadow.

Mɔ̃a bua asixɔxɔ siwo sɔ le eɖokui si le web-browser la ƒe nukpɔkpɔ ƒe didime nu. Woaƒoe nu ƒu ɖe calc()dɔwɔwɔwo me kple tsakatsaka remkple nukpɔkpɔ ƒe akpawo be wòana ŋuɖoɖo ƒe dzidzedzekpɔkpɔ ƒe nuwɔna nawɔ dɔ.

RFS zazã

Mixins la le Bootstrap me eye woanɔ anyi ne ènya de Bootstrap ƒe scss. Woateŋu aɖo RFS hã ɖe eɖokui si ne ehiã.

Mixin-awo zazã

rfs()Mixin la ƒe nuŋɔŋlɔ kpuiwo le , font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomkple padding-left. Kpɔ kpɔɖeŋu si le ete hena dzɔtsoƒe Sass kple CSS si woƒo ƒu.

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

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

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

Woateŋu atsɔ nunɔamesi bubu ɖesiaɖe ayi na rfs()mixin la ale:

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

!importantate ŋu atsɔe akpe ɖe asixɔxɔ ɖesiaɖe si nèdi hã ŋu ko:

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

Dɔwɔwɔawo zazã

Ne mèdi be yeazã nusiwo le eme o la, dɔwɔwɔ eve hã li:

• rfs-value()trɔa asixɔxɔ aɖe wòzua remasixɔxɔ ne wotsɔ pxasixɔxɔ aɖe to eme, le go bubuwo me la, etrɔa emetsonu ma ke.
• rfs-fluid-value()trɔa asixɔxɔ aɖe ƒe fluid version nenye be nunɔamesi la hiã rescaling.

Le kpɔɖeŋu sia me la, míezãa Bootstrap ƒe xɔtuɖoɖo ƒe breakpoint mixins siwo wotu ɖe eme la dometɔ ɖeka tsɔ wɔa atsyã ɖe lgbreakpoint te ko ŋudɔ.

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

Nuŋlɔɖi siwo keke ta

RFS nye dɔ si le eɖokui si le Bootstrap habɔbɔa te. Àteŋu akpɔ nu geɖe tso RFS kple eƒe ɖoɖowo ŋu le eƒe GitHub nudzraɖoƒe .