RFS
Bootstrap'тин өлчөмүн өзгөртүү кыймылдаткычы көрүү портторунда жана түзмөктөрүндө жеткиликтүү мейкиндикти жакшыраак пайдалануу үчүн жалпы CSS касиеттерин масштабдуу түрдө масштабдайт.
RFS деген эмне?
Bootstrap'тин каптал долбоору RFS - бул алгач шрифттин өлчөмүн өзгөртүү үчүн иштелип чыккан бирдиктин өлчөмүн өзгөртүү кыймылдаткычы (ошондуктан анын Responsive Font Sizes деген аббревиатурасы). Бүгүнкү күндө RFS көпчүлүк CSS касиеттерин margin
, padding
, border-radius
, же жада калса сыяктуу бирдик маанилери менен кайра масштабдай алат box-shadow
.
Механизм автоматтык түрдө браузердин көрүү терезесинин өлчөмдөрүнүн негизинде тиешелүү маанилерди эсептейт. Ал жооп берүүчү масштабдоо жүрүм-турумун иштетүү үчүн жана көрүү порту бирдиктеринин calc()
аралашмасы менен функцияларга түзүлөт .rem
RFS колдонуу
Миксиндер Bootstrap'ке камтылган жана Bootstrap'ты кошкондон кийин жеткиликтүү болот scss
. Зарыл болсо, RFS өз алдынча орнотулушу мүмкүн.
Миксиндерди колдонуу
Миксинде , , , , , , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , жана , , , , , , , жана , , , , , жана , , , , , , , , , , , , , , , , , , , , , , , , , , , , , жана rfs()
үчүн стенографиялык аралашма бар . Sass булагы жана түзүлгөн CSS үчүн төмөндөгү мисалды караңыз.font-size
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
.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 репозиторийинен тапса болот .