RFS

Unsa ang RFS?

Ang kilid nga proyekto sa Bootstrap nga RFS kay usa ka unit nga nagbag-o sa laki nga makina nga sa sinugdan gihimo aron mabag-o ang gidak-on sa font (busa ang minubo niini alang sa Responsive Font Sizes). Karong panahona ang RFS makahimo sa pag-usab sa kadaghanan sa CSS nga mga kabtangan nga adunay mga kantidad sa yunit sama sa margin, padding, border-radius, o bisan box-shadow.

Awtomatikong gikalkula sa mekanismo ang angay nga mga kantidad base sa mga sukat sa viewport sa browser. I-compile kini sa calc()mga function nga adunay usa ka pagsagol remug viewport nga mga unit aron mahimo ang responsive scaling nga pamatasan.

Paggamit sa RFS

Ang mga mixin gilakip sa Bootstrap ug magamit sa higayon nga imong ilakip ang Bootstrap's scss. Ang RFS mahimo usab nga ma- install nga standalone kung gikinahanglan.

Paggamit sa mga mixin

Ang rfs()mixin adunay mga shorthand para sa font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, ug padding-left. Tan-awa ang panig-ingnan sa ubos alang sa gigikanan nga Sass ug giipon nga CSS.

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

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

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

Ang bisan unsang ubang kabtangan mahimong ipasa sa rfs()mixin sama niini:

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

!importantmahimo usab nga idugang sa bisan unsang kantidad nga gusto nimo:

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

Paggamit sa mga gimbuhaton

Kung dili nimo gusto nga gamiton ang naglakip, adunay duha usab nga mga gimbuhaton:

• rfs-value()nag-convert sa usa ka bili ngadto sa usa ka rembili kon ang usa ka pxbili gipasa, sa ubang mga kaso kini mibalik sa samang resulta.
• rfs-fluid-value()ibalik ang pluwido nga bersyon sa usa ka bili kung ang propyedad nagkinahanglan og rescaling.

Niini nga pananglitan, among gigamit ang usa sa Bootstrap's built-in responsive breakpoint mixins aron lang magamit ang estilo ubos sa 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 */
  }
}

Gipalapdan nga dokumentasyon

Ang RFS usa ka bulag nga proyekto sa ilawom sa organisasyon sa Bootstrap. Dugang pa bahin sa RFS ug ang pag-configure niini makita sa GitHub repository niini .