RFS
Silnik zmiany rozmiaru Bootstrap szybko skaluje typowe właściwości CSS, aby lepiej wykorzystać dostępną przestrzeń we wszystkich rzutniach i urządzeniach.
Co to jest RFS?
Poboczny projekt Bootstrapa, RFS , to silnik zmiany rozmiaru jednostek, który początkowo został opracowany w celu zmiany rozmiaru czcionek (stąd jego skrót od Responsive Font Sizes). Obecnie RFS jest w stanie przeskalować większość właściwości CSS za pomocą wartości jednostkowych, takich jak margin
, padding
, border-radius
lub nawet box-shadow
.
Mechanizm automatycznie oblicza odpowiednie wartości na podstawie wymiarów rzutni przeglądarki. Zostanie skompilowany w calc()
funkcje z mieszanką jednostek rem
i rzutni, aby umożliwić responsywne zachowanie skalowania.
Korzystanie z RFS
Mixiny są zawarte w Bootstrap i są dostępne po dołączeniu Bootstrap's scss
. W razie potrzeby RFS można również zainstalować samodzielnie .
Korzystanie z mixinów
Mixin rfs()
ma skróty dla font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, i padding-left
. Zobacz poniższy przykład dla źródła Sass i skompilowanego CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Każda inna właściwość może zostać przekazana do rfs()
mixina w następujący sposób:
.selector {
@include rfs(4rem, border-radius);
}
!important
można również po prostu dodać do dowolnej wartości:
.selector {
@include padding(2.5rem !important);
}
Korzystanie z funkcji
Jeśli nie chcesz korzystać z dołączeń, dostępne są również dwie funkcje:
rfs-value()
konwertuje wartość narem
wartość, jeślipx
wartość jest przekazywana, w innych przypadkach zwraca ten sam wynik.rfs-fluid-value()
zwraca płynną wersję wartości, jeśli właściwość wymaga przeskalowania.
W tym przykładzie używamy jednego z wbudowanych w Bootstrap responsywnych mixinów punktów przerwania, aby zastosować stylizację tylko poniżej lg
punktu przerwania.
.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 */
}
}
Rozszerzona dokumentacja
RFS to osobny projekt w ramach organizacji Bootstrap. Więcej o RFS i jego konfiguracji można znaleźć w jego repozytorium GitHub .