RFS
Bootstrap-ի չափափոխման շարժիչը արձագանքում է ընդհանուր CSS հատկությունները՝ ավելի լավ օգտագործելու հասանելի տարածքը տեսադաշտերում և սարքերում:
Ի՞նչ է RFS-ը:
Bootstrap-ի կողմնակի նախագիծը RFS- ը միավորի չափափոխման շարժիչ է, որն ի սկզբանե մշակվել է տառաչափերի չափերը փոխելու համար (հետևաբար դրա հապավումը Responsive Font Sizes): Ներկայումս RFS-ն ի վիճակի է մեծացնել CSS հատկությունների մեծ մասը միավորի արժեքներով, ինչպիսիք են margin
, padding
, border-radius
կամ նույնիսկ box-shadow
:
Մեխանիզմը ավտոմատ կերպով հաշվարկում է համապատասխան արժեքները՝ ելնելով բրաուզերի տեսադաշտի չափերից: Այն կկազմվի calc()
գործառույթների մեջ՝ միախառնված rem
և տեսադաշտի միավորներով, որպեսզի հնարավոր լինի արձագանքող մասշտաբային վարքագիծը:
Օգտագործելով RFS
Միքսները ներառված են Bootstrap-ում և հասանելի են Bootstrap-ը ներառելուց հետո scss
: Անհրաժեշտության դեպքում RFS-ը կարող է տեղադրվել նաև ինքնուրույն :
Միքսինների օգտագործումը
Միքսինը rfs()
ունի սղագրություններ font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
եւ padding-left
: Տե՛ս ստորև բերված օրինակը Sass-ի աղբյուրի և կազմված CSS-ի համար:
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Ցանկացած այլ հատկություն կարող է փոխանցվել rfs()
mixin-ին այսպես.
.selector {
@include rfs(4rem, border-radius);
}
!important
կարող է նաև պարզապես ավելացվել ձեր ուզած արժեքին.
.selector {
@include padding(2.5rem !important);
}
Օգտագործելով գործառույթները
Երբ դուք չեք ցանկանում օգտագործել ներառումները, կան նաև երկու գործառույթ.
rfs-value()
փոխակերպում է արժեքըrem
արժեքի, եթեpx
արժեքը փոխանցվում է, այլ դեպքերում այն վերադարձնում է նույն արդյունքը:rfs-fluid-value()
վերադարձնում է արժեքի հեղուկ տարբերակը, եթե գույքը վերագնահատման կարիք ունի:
Այս օրինակում մենք օգտագործում ենք Bootstrap-ի ներկառուցված արձագանքող ընդմիջման միքսներից մեկը , որպեսզի կիրառենք ոճավորում միայն ընդմիջման կետից ցածր 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 */
}
}
Ընդլայնված փաստաթղթեր
RFS-ն առանձին նախագիծ է Bootstrap կազմակերպության ներքո: RFS-ի և դրա կազմաձևման մասին ավելին կարելի է գտնել նրա GitHub պահոցում :