RFS

Dɛn ne RFS?

Bootstrap no afã adwuma RFS yɛ unit resizing engine a mfiase no wɔyɛɛ no ​​sɛ wɔde bɛsesa font akɛse (enti ne tiawa a wɔfrɛ no Responsive Font Sizes). Mprempren RFS tumi san scaling CSS agyapade dodow no ara a unit values ​​te sɛ margin, padding, border-radius, anaa mpo box-shadow.

Afiri no ankasa bu akontaa a ɛfata a egyina browser viewport no nsusuwii so. Wɔbɛboaboa ano ayɛ no calc()dwumadie a ɛwɔ afrafra remne viewport units na ama mmuaeɛ scaling suban no atumi ayɛ adwuma.

RFS a wɔde bedi dwuma

Mixins no ka Bootstrap ho na ɛwɔ hɔ bere a wode Bootstrap's no aka ho no scss. Wobetumi nso de RFS ahyɛ ne ho sɛ ɛho hia a.

Wɔde mixins no di dwuma

rfs()Mixin no wɔ nsɛmfua ntiantiaa a ɛkyerɛ , font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomne padding-left. Hwɛ nhwɛsoɔ a ɛwɔ aseɛ ha yi ma source Sass ne CSS a wɔaboaboa ano.

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

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

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

Wobetumi de agyapade foforo biara akɔ rfs()mixin no so te sɛ eyi:

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

!importantnso wobetumi de aka bo biara a wopɛ ho ara kwa:

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

Dwumadi ahorow no a wɔde bedi dwuma

Sɛ wompɛ sɛ wode nea ɛka ho no bedi dwuma a, dwumadi abien nso wɔ hɔ:

• rfs-value()dane botae bi ma ɛyɛ rembotae sɛ wɔde pxbotae bi twam a, wɔ tebea afoforo mu no ɛsan de nea efi mu ba koro no ara ba.
• rfs-fluid-value()san de fluid version a ɛwɔ value bi mu ba sɛ agyapade no hia rescaling a.

Wɔ saa nhwɛsoɔ yi mu no, yɛde Bootstrap a wɔasisi mu a ɛyɛ mmuaeɛ breakpoint mixins no mu baako di dwuma de di dwuma de styling nko ara di dwuma wɔ lgbreakpoint no ase.

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

Nwoma a wɔatrɛw mu

RFS yɛ adwuma a ɛyɛ soronko wɔ Bootstrap ahyehyɛde no ase. Wobetumi ahu RFS ne ne nhyehyeɛ ho nsɛm pii wɔ ne GitHub adekorabea .