RFS nisqa
Bootstrap kaqpa hatun sayayninta tikray motor kutichiq común CSS propiedades kaqninta escalan aswan allinta llamk'achinapaq tarikuq espaciota tukuy qhaway punkukuna chaymanta dispositivokuna kaqpi.
¿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 rem
chaymanta 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-size
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-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);
}
!important
hinallataqmi 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 tikranrem
sichus hukpx
chani 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 .