RFS

Beth yw RFS?

Mae prosiect ochr Bootstrap, RFS , yn injan newid maint uned a ddatblygwyd yn wreiddiol i newid maint ffontiau (felly ei dalfyriad ar gyfer Responsive Font Sizes). Y dyddiau hyn mae RFS yn gallu ailraddio'r rhan fwyaf o eiddo CSS gyda gwerthoedd uned fel margin, padding, border-radius, neu hyd yn oed box-shadow.

Mae'r mecanwaith yn cyfrifo'r gwerthoedd priodol yn awtomatig yn seiliedig ar ddimensiynau porth gwylio'r porwr. Bydd yn cael ei lunio'n calc()swyddogaethau gyda chymysgedd o remunedau a golygfan i alluogi'r ymddygiad graddio ymatebol.

Defnyddio RFS

Mae'r cymysgeddau wedi'u cynnwys yn Bootstrap ac maent ar gael unwaith y byddwch yn cynnwys Bootstrap's scss. Gellir gosod RFS yn annibynnol hefyd os oes angen.

Gan ddefnyddio'r cymysgeddau

Mae gan y rfs()mixin lawiau byr ar gyfer font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottoma padding-left. Gweler yr enghraifft isod am ffynhonnell Sass a CSS a luniwyd.

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

Gellir trosglwyddo unrhyw eiddo arall i'r rfs()mixin fel hyn:

.selector {
  @include rfs(4rem, border-radius);
}

!importantgellir ei ychwanegu hefyd at ba bynnag werth rydych chi ei eisiau:

.selector {
  @include padding(2.5rem !important);
}

Defnyddio'r swyddogaethau

Pan nad ydych am ddefnyddio'r cynnwys, mae dwy swyddogaeth hefyd:

• rfs-value()yn trosi gwerth yn remwerth os caiff pxgwerth ei basio, mewn achosion eraill mae'n dychwelyd yr un canlyniad.
• rfs-fluid-value()yn dychwelyd y fersiwn hylifol o werth os oes angen ailraddio'r eiddo.

Yn yr enghraifft hon, rydyn ni'n defnyddio un o gymysgeddau torbwynt ymatebol adeiledig Bootstrap i gymhwyso steilio o dan y lgtorbwynt yn unig.

.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 */
  }
}

Dogfennaeth estynedig

Mae RFS yn brosiect ar wahân o dan y sefydliad Bootstrap. Gellir dod o hyd i fwy am RFS a'i ffurfweddiad ar ei gadwrfa GitHub .