RFS

He aha ka RFS?

ʻO ka ʻaoʻao ʻaoʻao ʻo Bootstrap ʻo RFS he ʻenekini hoʻololi hou i ka ʻāpana i hoʻomohala mua ʻia e hoʻololi i ka nui o nā font (no laila kona pōkole no Responsive Font Sizes). I kēia mau lā hiki iā RFS ke hoʻihoʻi hou i ka hapa nui o nā waiwai CSS me nā waiwai ʻāpana e like me margin, padding, border-radius, a i ʻole box-shadow.

Hoʻohelu ʻakomi ka mīkini i nā waiwai kūpono e pili ana i nā ana o ka nānā ʻana i ka polokalamu kele pūnaewele. E hōʻuluʻulu ʻia i loko o calc()nā hana me ka hui ʻana o remnā ʻāpana viewport e hiki ai i ka hana scaling pane.

Ke hoʻohana nei iā RFS

Hoʻokomo ʻia nā mixins i Bootstrap a loaʻa iā ʻoe ke hoʻokomo iā Bootstrap's scss. Hiki ke hoʻokomo ʻia ka RFS inā pono.

Ke hoʻohana nei i nā mixins

He rfs()mau pōkole ka mixin no font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, a padding-left. E ʻike i ka laʻana ma lalo no ke kumu Sass a me CSS i hui pū ʻia.

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

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

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

Hiki ke hāʻawi ʻia nā waiwai ʻē aʻe i ka rfs()mixin e like me kēia:

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

!importantHiki ke hoʻohui ʻia i kēlā me kēia waiwai āu e makemake ai:

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

Ke hoʻohana nei i nā hana

Inā ʻaʻole ʻoe makemake e hoʻohana i nā mea komo, aia nō ʻelua mau hana:

• rfs-value()hoʻololi i kahi waiwai i remwaiwai inā pxua hala kekahi waiwai, i nā hihia ʻē aʻe e hoʻihoʻi i ka hopena like.
• rfs-fluid-value()hoʻihoʻi i ka mana wai o kahi waiwai inā pono ka waiwai e hoʻihoʻi hou.

Ma kēia hiʻohiʻona, hoʻohana mākou i kekahi o Bootstrap i kūkulu ʻia i loko o ka hui ʻana i ka breakpoint pane e hoʻopili wale i ke ʻano ma lalo o ka 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 */
  }
}

Palapala hoʻonui

He papahana kaʻawale ʻo RFS ma lalo o ka hui Bootstrap. Hiki ke loaʻa nā mea hou aʻe e pili ana iā RFS a me kāna hoʻonohonoho ma kāna waihona GitHub .