RFS
Моторот за промена на големината на Bootstrap реагира на вообичаените својства на CSS за подобро да го искористи достапниот простор низ приклучоците за гледање и уредите.
Што е RFS?
Страничниот проект на Bootstrap RFS е мотор за промена на големината на единицата, кој првично беше развиен за промена на големината на фонтот (оттука и неговата кратенка за Responsive Font Sizes). Во денешно време RFS е способен да ги рескалира повеќето својства на CSS со единечни вредности како margin
, padding
, border-radius
, или дури box-shadow
.
Механизмот автоматски ги пресметува соодветните вредности врз основа на димензиите на приказот на прелистувачот. Ќе биде компајлиран во calc()
функции со мешавина од rem
единици и пристаништа за поглед за да се овозможи однесување на скалирање со одговор.
Користење на RFS
Миксините се вклучени во Bootstrap и се достапни откако ќе го вклучите Bootstrap's scss
. RFS може да се инсталира и самостојно доколку е потребно.
Користење на мешавини
Миксинот rfs()
има стенографија за font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, и padding-left
. Погледнете го примерот подолу за изворот Sass и компајлиран CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Секое друго својство може да се пренесе на rfs()
миксинот вака:
.selector {
@include rfs(4rem, border-radius);
}
!important
исто така може да се додаде на која било вредност што ја сакате:
.selector {
@include padding(2.5rem !important);
}
Користење на функциите
Кога не сакате да ги користите вклучувањата, има и две функции:
rfs-value()
ја конвертира вредноста воrem
вредност акоpx
се пренесе вредност, во други случаи го враќа истиот резултат.rfs-fluid-value()
ја враќа течната верзија на вредност ако имотот има потреба од рескалирање.
Во овој пример, ние користиме еден од вградените мешавини на точки на прекин на одговорните Bootstrap за да примениме стил само под точката на 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 */
}
}
Проширена документација
RFS е посебен проект под организацијата Bootstrap. Повеќе за RFS и неговата конфигурација може да најдете на неговото складиште GitHub .