RFS

Ano ang RFS?

Ang side project ng Bootstrap na RFS ay isang unit resizing engine na unang binuo para baguhin ang laki ng font (kaya ang pagdadaglat nito para sa Responsive Font Sizes). Sa ngayon, ang RFS ay may kakayahang muling i-rescaling ang karamihan sa mga katangian ng CSS na may mga halaga ng yunit tulad ng margin, padding, border-radius, o kahit na box-shadow.

Awtomatikong kinakalkula ng mekanismo ang mga naaangkop na halaga batay sa mga sukat ng viewport ng browser. Isasama ito sa mga calc()function na may halo ng remat viewport unit para paganahin ang responsive scaling na gawi.

Gamit ang RFS

Ang mga mixin ay kasama sa Bootstrap at magagamit sa sandaling isama mo ang Bootstrap's scss. Ang RFS ay maaari ding i- install nang nakapag -iisa kung kinakailangan.

Gamit ang mixins

Ang rfs()mixin ay may mga shorthand para sa font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, at padding-left. Tingnan ang halimbawa sa ibaba para sa pinagmulang Sass at pinagsama-samang CSS.

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

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

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

Anumang iba pang ari-arian ay maaaring ipasa sa rfs()mixin tulad nito:

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

!importantmaaari ding idagdag sa anumang halaga na gusto mo:

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

Gamit ang mga function

Kapag ayaw mong gamitin ang mga kasama, mayroon ding dalawang function:

• rfs-value()nagko-convert ng isang halaga sa isang remhalaga kung ang isang pxhalaga ay naipasa, sa ibang mga kaso ay nagbabalik ito ng parehong resulta.
• rfs-fluid-value()ibinabalik ang tuluy-tuloy na bersyon ng isang halaga kung ang property ay nangangailangan ng rescaling.

Sa halimbawang ito, ginagamit namin ang isa sa mga built-in na tumutugon na breakpoint mix ng Bootstrap upang ilapat lamang ang estilo sa ibaba ng lgbreakpoint.

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

Pinahabang dokumentasyon

Ang RFS ay isang hiwalay na proyekto sa ilalim ng organisasyong Bootstrap. Higit pa tungkol sa RFS at ang configuration nito ay makikita sa GitHub repository nito .