RFS
ʻO ka ʻenekini hoʻololi hou ʻana o Bootstrap e hoʻohālikelike i nā waiwai CSS maʻamau no ka hoʻohana maikaʻi ʻana i nā wahi i loaʻa ma nā wahi ʻike a me nā mea hana.
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 rem
nā ʻā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);
}
!important
Hiki 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 irem
waiwai ināpx
ua 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 lg
breakpoint.
.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 .