RFS

Kodi RFS ndi chiyani?

Pulojekiti yam'mbali ya Bootstrap RFS ndi injini yosinthira ma unit yomwe idapangidwa kuti isinthe kukula kwa mafonti (chifukwa chake chidule chake cha Ma Responsive Font Sizes). Masiku ano RFS imatha kukulitsanso zinthu zambiri za CSS ndi mayunitsi monga margin, padding, border-radius, kapena ngakhale box-shadow.

Makinawa amawerengera okha milingo yoyenera kutengera kukula kwa kusakatula kowonera. Idzaphatikizidwa kukhala calc()ntchito zosakanikirana remndi mayunitsi owonera kuti athe kuyankha mokweza.

Kugwiritsa ntchito RFS

Zosakaniza zikuphatikizidwa mu Bootstrap ndipo zimapezeka mukangophatikiza za Bootstrap scss. RFS ikhoza kukhazikitsidwanso yokha ngati ikufunika.

Kugwiritsa ntchito zosakaniza

Mixin rfs()ali ndi shorthands za font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomndi padding-left. Onani chitsanzo pansipa cha Sass ndi CSS yophatikizidwa.

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

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

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

Katundu wina aliyense akhoza kuperekedwa ku rfs()mixin motere:

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

!importantmutha kungowonjezedwa pamtengo uliwonse womwe mungafune:

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

Kugwiritsa ntchito

Ngati simukufuna kugwiritsa ntchito kuphatikiza, palinso ntchito ziwiri:

• rfs-value()amasintha mtengo kukhala remmtengo ngati pxmtengo wadutsa, nthawi zina umabweretsanso zotsatira zomwezo.
• rfs-fluid-value()imabweretsanso mtundu wamadzimadzi wamtengo ngati katunduyo akufunika kukulitsidwa.

Muchitsanzo ichi, timagwiritsa ntchito imodzi mwazosakaniza za Bootstrap zomwe zimayankhidwa kuti tigwiritse ntchito masitayelo omwe ali pansipa lg.

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

Zolemba zowonjezera

RFS ndi ntchito yosiyana pansi pa bungwe la Bootstrap. Zambiri za RFS ndi kasinthidwe kake zitha kupezeka pankhokwe yake ya GitHub .