RFS
“Bootstrap” -yň ululygyndaky hereketlendiriji, görnüşler we enjamlar boýunça bar bolan ýerleri has gowy ulanmak üçin umumy CSS häsiýetlerini ses bilen ölçär.
RFS näme?
“Bootstrap” -yň gapdalyndaky taslama RFS , başda şrift ölçeglerini üýtgetmek üçin işlenip düzülen ölçeg ölçegli hereketlendiriji (şonuň üçin jogap şriftleriniň gysgaltmasy). Häzirki wagtda RFS, CSS häsiýetleriniň köpüsini, ýa-da hatda birlik bahalary margin
bilen padding
aýyrmaga border-radius
ukyply box-shadow
.
Mehanizm, brauzer görnüşiniň ölçeglerine baglylykda degişli bahalary awtomatiki hasaplaýar. Düşünjeli ulalmak häsiýetini üpjün etmek calc()
üçin garyşyk we görnüş bölümleriniň garyndysy bilen funksiýalara jemlener .rem
RFS ulanmak
Garyndylar “Bootstrap” -a girýär we “Bootstrap” -y goşanyňyzdan soň elýeterlidir scss
. Gerek bolsa , RFS özbaşdak gurup bolýar.
Garyndylary ulanmak
Garyndynyň rfs()
,,,,,,,,,,,,,,,,,,,,,,,,, font-size
_ margin
_ margin-top
_ margin-right
_ margin-bottom
_ margin-left
_ padding
_ padding-top
_ padding-right
_ padding-bottom
_ padding-left
_ Sass çeşmesi we düzülen CSS üçin aşakdaky mysala serediň.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
rfs()
Islendik başga emläk şunuň ýaly garyndylara geçirilip bilner :
.selector {
@include rfs(4rem, border-radius);
}
!important
islän bahaňyza goşup bilersiňiz:
.selector {
@include padding(2.5rem !important);
}
Funksiýalary ulanmak
Goşulanlary ulanmak islemeýän wagtyňyzda iki funksiýa hem bar:
rfs-value()
rem
bir baha geçse, bahany gymmata öwürýär,px
beýleki ýagdaýlarda şol bir netijäni berýär.rfs-fluid-value()
emläk ýatyrylmaly bolsa, bahanyň suwuk görnüşini yzyna berýär.
Bu mysalda, diňe kesiş nokadynyň aşagyndaky dizaýny ulanmak üçin “Bootstrap” -yň içindäki jogap beriji nokat garyndylaryndanlg
birini ulanýarys .
.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 */
}
}
Giňeldilen resminamalar
RFS, Bootstrap guramasynyň çäginde aýratyn taslama. RFS we konfigurasiýasy barada has giňişleýin maglumaty GitHub ammarynda tapyp bilersiňiz .