RFS

Inona no atao hoe RFS?

Ny tetik'asa lafiny an'ny Bootstrap RFS dia maotera manova ny singa izay novolavolaina voalohany hanovana ny haben'ny endritsoratra (noho izany ny fanafohezana azy ho Responsive Font Sizes). Amin'izao fotoana izao, ny RFS dia afaka mamerina ny ankamaroan'ny fananana CSS miaraka amin'ny soatoavin'ny singa toy ny margin, padding, border-radius, na box-shadow.

Ny mekanika dia manao kajy ho azy ireo soatoavina mifanaraka amin'ny haben'ny navigateur viewport. Izy io dia hatambatra amin'ny calc()fiasa miaraka amin'ny fifangaroan'ny remunit-viewport mba ahafahan'ny fitondran-tena mamaly.

Mampiasa RFS

Ny mixins dia tafiditra ao amin'ny Bootstrap ary azo alaina rehefa ampidirinao ny Bootstrap's scss. Ny RFS dia azo apetraka irery ihany koa raha ilaina.

Ampiasao ny mixins

Ny rfs()mixin dia manana fanafohezana ny font-size, margin, margin-top, margin-right, margin-bottom, margin-left, , padding, padding-top, padding-right, padding-bottom, ary padding-left. Jereo ny ohatra etsy ambany ho an'ny loharano Sass sy CSS natambatra.

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

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

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

Ny fananana hafa rehetra dia azo ampitaina amin'ny rfs()mixin toy izao:

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

!importantazo ampiana fotsiny amin'izay sanda tianao:

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

Mampiasa ny asa

Rehefa tsy te hampiasa ny tafiditra ianao dia misy fiasa roa ihany koa:

• rfs-value()mamadika sanda iray ho remsanda raha toa ka lany ny pxsanda iray, amin'ny tranga hafa dia mitovy ny valiny.
• rfs-fluid-value()mamerina ny dikan-teny mivaingana amin'ny sanda iray raha mila havaozina ilay fananana.

Amin'ity ohatra ity, mampiasa ny iray amin'ireo mixin breakpoint mamaly ao amin'ny Bootstrap izahay mba hampiharana ny styling eo ambanin'ny 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 */
  }
}

Taratasy miitatra

RFS dia tetikasa miavaka eo ambanin'ny fikambanana Bootstrap. Mianara bebe kokoa momba ny RFS sy ny fandrindrana azy dia azo jerena ao amin'ny tahiry GitHub .