RFS

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-sizemarginmargin-topmargin-rightmargin-bottommargin-leftpaddingpadding-toppadding-rightpadding-bottompadding-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 репозиторийинен тапса болот .