Движок изменения размеров Bootstrap адаптивно масштабирует обычные CSS-свойства для лучшего использования доступного пространства на различных видовых экранах и устройствах.
Что такое RFS?
Побочный проект Bootstrap RFS — это движок изменения размеров единиц, который изначально был разработан для изменения размеров шрифтов (отсюда его аббревиатура Responsive Font Sizes). Сегодня RFS способен масштабировать большинство CSS-свойств со значениями единиц, такими как margin
, padding
, border-radius
или даже box-shadow
.
Механизм автоматически вычисляет подходящие значения на основе размеров окна просмотра браузера. Он будет скомпилирован в функции calc()
со смешанными единицами rem
и viewport для включения поведения адаптивного масштабирования.
Использование RFS
Миксины включены в Bootstrap и становятся доступными после включения scss
Bootstrap. 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.