RFS
Ny maotera fanovana ny haben'ny Bootstrap dia mamaly ny fananan'ny CSS mahazatra mba hampiasana tsara kokoa ny habaka misy eo amin'ny seranana sy fitaovana.
Inona no atao hoe RFS?
Ny tetik'asa lafiny an'ny Bootstrap RFS dia maotera manova ny singa izay novolavolaina voalohany hanovana ny haben'ny endritsoratra (noho izany ny fanafohezana azy ho Responsive Font Sizes). Amin'izao fotoana izao, ny RFS dia afaka mamerina ny ankamaroan'ny fananana CSS miaraka amin'ny soatoavin'ny singa toy ny margin
, padding
, border-radius
, na box-shadow
.
Ny mekanika dia manao kajy ho azy ireo soatoavina mifanaraka amin'ny haben'ny navigateur viewport. Izy io dia hatambatra amin'ny calc()
fiasa miaraka amin'ny fifangaroan'ny rem
unit-viewport mba ahafahan'ny fitondran-tena mamaly.
Mampiasa RFS
Ny mixins dia tafiditra ao amin'ny Bootstrap ary azo alaina rehefa ampidirinao ny Bootstrap's scss
. Ny RFS dia azo apetraka irery ihany koa raha ilaina.
Ampiasao ny mixins
Ny rfs()
mixin dia manana fanafohezana ny font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, , padding
, padding-top
, padding-right
, padding-bottom
, ary padding-left
. Jereo ny ohatra etsy ambany ho an'ny loharano Sass sy CSS natambatra.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Ny fananana hafa rehetra dia azo ampitaina amin'ny rfs()
mixin toy izao:
.selector {
@include rfs(4rem, border-radius);
}
!important
azo ampiana fotsiny amin'izay sanda tianao:
.selector {
@include padding(2.5rem !important);
}
Mampiasa ny asa
Rehefa tsy te hampiasa ny tafiditra ianao dia misy fiasa roa ihany koa:
rfs-value()
mamadika sanda iray horem
sanda raha toa ka lany nypx
sanda iray, amin'ny tranga hafa dia mitovy ny valiny.rfs-fluid-value()
mamerina ny dikan-teny mivaingana amin'ny sanda iray raha mila havaozina ilay fananana.
Amin'ity ohatra ity, mampiasa ny iray amin'ireo mixin breakpoint mamaly ao amin'ny Bootstrap izahay mba hampiharana ny styling eo ambanin'ny 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 */
}
}
Taratasy miitatra
RFS dia tetikasa miavaka eo ambanin'ny fikambanana Bootstrap. Mianara bebe kokoa momba ny RFS sy ny fandrindrana azy dia azo jerena ao amin'ny tahiry GitHub .