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