RFS e le
Bootstrap ya resizing enjene karabelo scales tloaelehileng CSS thepa ho molemo sebelisa sebaka fumaneha ho pholletsa le viewports le disebediswa.
RFS ke eng?
Bootstrap o lehlakore porojeke e ne RFS ke unit trust resizing enjene e leng qalong e ne e ntshetswa pele ho fetola boholo ba fonte boholo (ka hona e le khutsufatso ea eona bakeng sa Responsive Font Sizes). Matšatšing a lehono RFS e kgona go lekanyetša gape bontši bja dithoto tša CSS ka dikelo tša yuniti tša go swana le margin
, padding
, border-radius
, goba gaešita le box-shadow
.
Mokgwa o bala ka go iketla dikelo tša maleba go ya ka ditekanyo tša lefelo la go lebelela la sephephediši. E tla kgoboketšwa go ba calc()
mešomo yeo e nago le motswako wa rem
le diyuniti tša viewport go kgontšha boitshwaro bja go lekanya bjo bo arabelago.
Go diriša RFS
Di-mixin di akaretšwa go Bootstrap gomme di hwetšagala ge o šetše o akaretša Bootstrap's scss
. RFS e ka hlongwa gape e ikemetše ge e ba go nyakega.
Go diriša di- mixin
rfs()
Mixin e na le dikhutsofatšo tša , font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
le padding-left
. Bona mohlala ka tlase bakeng sa mohlodi Sass le CSS e kgobokeditšwego.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Thepa efe goba efe ye nngwe e ka fetišetšwa go rfs()
mixin ka tsela ye:
.selector {
@include rfs(4rem, border-radius);
}
!important
gape e ka no okeletšwa go boleng le ge e le bofe bjo o bo nyakago:
.selector {
@include padding(2.5rem !important);
}
Go šomiša mešomo
Ge o sa nyake go šomiša di akaretša, go na le gape le mešomo ye mebedi:
rfs-value()
e fetolela boleng gorem
boleng gepx
boleng bo fetišwa, maemong a mangwe bo bušetša sephetho se se swanago.rfs-fluid-value()
e bušetša phetolelo ya seela ya boleng ge e le gore thepa e nyaka go lekanywa gape.
Mohlaleng wo, re diriša e nngwe ya di- mixin tša ntlha ya go kgaotša tšeo di arabelago tšeo di agetšwego ka gare tša Bootstrap go diriša feela setaele ka tlase ga ntlha ya go lg
kgaotša.
.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 */
}
}
Ditokomane tše di katološitšwego
RFS ke projeke e arohaneng tlas'a mokgatlo wa Bootstrap. Tse dingwe ka ga RFS le peakanyo ya yona di ka hwetšwa polokelong ya yona ya GitHub .