RFS nisqa

¿Imataq RFS?

Bootstrap kaqpa lado proyecton RFS huk unidadpa sayayninta tikray motormi chaymi qallariypi ruwasqa karqan letrakuna sayayninkunata tikranapaq (chayraykum Responsive Font Sizes nisqapaq pisichasqa). Kunan pacha RFS aswan CSS kaqninkunata unidad chanikunawan margin, padding, border-radius, utaq astawanpas musuqmanta escalayta atin box-shadow.

Mecanismo kikinmanta yupan tupaq chanikuna maskaq qhawaypa dimensiones kaqninpi. Huñusqa kanqa calc()ruwanakunaman huk chaqrusqawan remchaymanta qhawana unidadkunawan kutichiq escala ruwayta atichinanpaq.

RFS nisqawan yanapachikuspa

Mixinkuna Bootstrap kaqpi churasqa kanku chaymanta huk kuti Bootstrap's kaqpi churasqa kachkanku scss. RFS nisqatapas sapallan churakunmanmi necesitakuqtin.

Mixinkunata llamk’achispa

Mixin nisqaqa , , , , , , , , , nisqapaq rfs()taquigrafías nisqayuqmi . Uraypi kaq rikch'anata qhaway pukyu Sass kaqpaq chaymanta huñusqa CSS kaqpaq.font-sizemarginmargin-topmargin-rightmargin-bottommargin-leftpaddingpadding-toppadding-rightpadding-bottompadding-left

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

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

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

Ima huk propiedadpas rfs()kayhinata mixinman pasayta atikunmi:

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

!importanthinallataqmi ima chaniyuq munasqaykimanpas yapasqalla kanman:

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

Ruwaykunata llamk’achispa

Inclus nisqakunata mana llamk'achiyta munaspaqa, iskay ruwanakunapas kanmi:

• rfs-value()huk chanita huk chaniman tikran remsichus huk pxchani pasasqa, huk kutikunapiqa kikin ruruta kutichin.
• rfs-fluid-value()huk chaniyuqpa fluido laya kaqninta kutichin sichus propiedad musuqmanta escalayta munan.

Kay rikch'anapi, huk Bootstrap ruwasqa kutichiq p'akiy mixins kaqmanta llamk'achiyku, p'akiy urapi estilollata churanapaq lg.

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

Mastarisqa qillqakuna

RFS nisqaqa huk sapaq llamk'aymi Bootstrap tantanakuypa kamachisqan. Aswan RFS kaqmanta chaymanta ruwayninmanta tarikunman GitHub waqaychasqanpi .