RFS

RFS yog dab tsi?

Bootstrap's sab project RFS yog ib chav tsev resizing cav uas tau pib tsim los hloov qhov loj me font (li no nws cov ntawv luv rau Responsive Font Sizes). Niaj hnub no RFS muaj peev xwm los kho cov khoom CSS feem ntau nrog cov nqi xws li margin, padding, border-radius, lossis txawm tias box-shadow.

Lub tshuab cia li xam cov nqi tsim nyog raws li qhov ntev ntawm qhov browser saib. Nws yuav muab tso ua ke rau hauv calc()kev ua haujlwm nrog kev sib xyaw ua ke remthiab cov chaw saib xyuas kom ua tau raws li tus cwj pwm scaling.

Kev siv RFS

Cov mixins suav nrog hauv Bootstrap thiab muaj thaum koj suav nrog Bootstrap's scss. RFS tseem tuaj yeem ntsia tau ib leeg yog tias xav tau.

Siv cov mixins

Cov rfs()mixin muaj shorthands rau font-size, margin, margin-top, margin-right, margin-bottom, margin-left, , padding, padding-top, padding-right, padding-bottom, thiab padding-left. Saib cov piv txwv hauv qab no rau qhov chaw Sass thiab muab tso ua ke CSS.

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

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

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

Lwm yam khoom muaj peev xwm kis tau mus rau rfs()mixin zoo li no:

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

!importanttuaj yeem tsuas yog ntxiv rau txhua yam uas koj xav tau:

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

Siv cov haujlwm

Thaum koj tsis xav siv cov suav nrog, kuj muaj ob txoj haujlwm:

• rfs-value()converts tus nqi rau hauv tus remnqi yog tias tus pxnqi dhau, nyob rau hauv lwm yam nws rov zoo li qub.
• rfs-fluid-value()rov qab cov kua version ntawm tus nqi yog tias cov cuab yeej xav tau rescaling.

Hauv qhov piv txwv no, peb siv ib qho ntawm Bootstrap's built-in responsive breakpoint mixins tsuas yog siv styling hauv qab ntawm qhov lgtawg.

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

Cov ntaub ntawv txuas ntxiv

RFS yog ib qhov project cais nyob rau hauv lub koom haum Bootstrap. Ntau ntxiv txog RFS thiab nws cov teeb tsa tuaj yeem pom ntawm nws qhov chaw cia GitHub .