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()має скорочення для 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 .