RFS

Ի՞նչ է 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 պահոցում :