RFS
Bootstrap no resizing engine no responsively scales common CSS properties de di dwuma yiye wɔ space a ɛwɔ hɔ wɔ viewports ne devices nyinaa so.
Dɛn ne RFS?
Bootstrap no afã adwuma RFS yɛ unit resizing engine a mfiase no wɔyɛɛ no sɛ wɔde bɛsesa font akɛse (enti ne tiawa a wɔfrɛ no Responsive Font Sizes). Mprempren RFS tumi san scaling CSS agyapade dodow no ara a unit values te sɛ margin
, padding
, border-radius
, anaa mpo box-shadow
.
Afiri no ankasa bu akontaa a ɛfata a egyina browser viewport no nsusuwii so. Wɔbɛboaboa ano ayɛ no calc()
dwumadie a ɛwɔ afrafra rem
ne viewport units na ama mmuaeɛ scaling suban no atumi ayɛ adwuma.
RFS a wɔde bedi dwuma
Mixins no ka Bootstrap ho na ɛwɔ hɔ bere a wode Bootstrap's no aka ho no scss
. Wobetumi nso de RFS ahyɛ ne ho sɛ ɛho hia a.
Wɔde mixins no di dwuma
rfs()
Mixin no wɔ nsɛmfua ntiantiaa a ɛkyerɛ , font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
ne padding-left
. Hwɛ nhwɛsoɔ a ɛwɔ aseɛ ha yi ma source Sass ne CSS a wɔaboaboa ano.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Wobetumi de agyapade foforo biara akɔ rfs()
mixin no so te sɛ eyi:
.selector {
@include rfs(4rem, border-radius);
}
!important
nso wobetumi de aka bo biara a wopɛ ho ara kwa:
.selector {
@include padding(2.5rem !important);
}
Dwumadi ahorow no a wɔde bedi dwuma
Sɛ wompɛ sɛ wode nea ɛka ho no bedi dwuma a, dwumadi abien nso wɔ hɔ:
rfs-value()
dane botae bi ma ɛyɛrem
botae sɛ wɔdepx
botae bi twam a, wɔ tebea afoforo mu no ɛsan de nea efi mu ba koro no ara ba.rfs-fluid-value()
san de fluid version a ɛwɔ value bi mu ba sɛ agyapade no hia rescaling a.
Wɔ saa nhwɛsoɔ yi mu no, yɛde Bootstrap a wɔasisi mu a ɛyɛ mmuaeɛ breakpoint mixins no mu baako di dwuma de di dwuma de styling nko ara di dwuma wɔ lg
breakpoint no ase.
.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 */
}
}
Nwoma a wɔatrɛw mu
RFS yɛ adwuma a ɛyɛ soronko wɔ Bootstrap ahyehyɛde no ase. Wobetumi ahu RFS ne ne nhyehyeɛ ho nsɛm pii wɔ ne GitHub adekorabea .