RFS

Chii chinonzi RFS?

Bootstrap's side purojekiti RFS iyuniti inodzoreredza saizi injini iyo yakatanga kugadzirwa kuti igadzirise saizi yefonti (saka chidimbu chayo cheResponsive Font Sizes). Mazuvano RFS inokwanisa kudzoreredza zvivakwa zvakawanda zveCSS nemhando dzemayuniti senge margin, padding, border-radius, kana kunyange box-shadow.

Iyo mechanic inoverengera otomatiki kukosha kwakakodzera zvichienderana nehukuru hwebrowser viewport. Ichaunganidzwa kuita calc()mabasa nemusanganiswa we remuye yekutarisa mayuniti kuti agonese inopindura scaling maitiro.

Kushandisa RFS

Iwo masanganiswa anosanganisirwa muBootstrap uye anowanikwa kana uchinge wasanganisira Bootstrap's scss. RFS inogonawo kuiswa yakamira kana ichidikanwa.

Kushandisa misanganiswa

Musanganiswa rfs()une shorthands re font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomuye padding-left. Ona muenzaniso pazasi kune sosi Sass uye yakaunganidzwa CSS.

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

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

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

Chero chimwe chivakwa chinogona kupfuudzwa kune rfs()mixin seizvi:

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

!importantinogonawo kungowedzerwa kune chero kukosha kwaunoda:

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

Kushandisa mabasa

Kana iwe usingade kushandisa iyo inosanganisira, kune zvakare maviri mabasa:

• rfs-value()inoshandura kukosha kuita remkukosha kana pxkukosha kwapfuura, mune dzimwe nguva inodzorera zvakafanana.
• rfs-fluid-value()inodzosa iyo fluid vhezheni yemutengo kana chivakwa chichida kudzoreredzwa.

Mumuenzaniso uyu, isu tinoshandisa imwe yeBootstrap yakavakirwa-mukati inopindura breakpoint misanganiswa kuti ingoisa styling pazasi lgpebreakpoint.

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

Magwaro akawedzerwa

RFS ipurojekiti yakaparadzana pasi pesangano reBootstrap. Zvakawanda nezve RFS uye kumisikidzwa kwayo inogona kuwanikwa pane yayo GitHub repository .