RFS
Die Größenänderungs-Engine von Bootstrap skaliert reaktionsschnell gängige CSS-Eigenschaften, um den verfügbaren Platz über Ansichtsfenster und Geräte hinweg besser zu nutzen.
Was ist RFS?
Das Bootstrap-Nebenprojekt RFS ist eine Unit-Resizing-Engine, die ursprünglich entwickelt wurde, um die Schriftgröße zu ändern (daher die Abkürzung für Responsive Font Sizes). Heutzutage ist RFS in der Lage, die meisten CSS-Eigenschaften mit Einheitenwerten wie margin
, padding
, border-radius
oder sogar neu zu skalieren box-shadow
.
Der Mechanismus berechnet automatisch die entsprechenden Werte basierend auf den Abmessungen des Browser-Darstellungsfensters. Es wird in calc()
Funktionen mit einer Mischung aus rem
Viewport-Einheiten kompiliert, um das responsive Skalierungsverhalten zu ermöglichen.
Verwendung von RFS
Die Mixins sind in Bootstrap enthalten und stehen zur Verfügung, sobald Sie Bootstrap's einbinden scss
. RFS kann bei Bedarf auch eigenständig installiert werden.
Verwenden der Mixins
Das rfs()
Mixin hat Abkürzungen für font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, und padding-left
. Siehe das Beispiel unten für Quell-Sass und kompiliertes CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Jede andere Eigenschaft kann wie folgt an das rfs()
Mixin übergeben werden:
.selector {
@include rfs(4rem, border-radius);
}
!important
kann auch einfach zu jedem gewünschten Wert hinzugefügt werden:
.selector {
@include padding(2.5rem !important);
}
Nutzung der Funktionen
Wenn Sie die Includes nicht verwenden möchten, gibt es auch zwei Funktionen:
rfs-value()
wandelt einen Wert in einenrem
Wert um, wenn einpx
Wert übergeben wird, in anderen Fällen gibt es das gleiche Ergebnis zurück.rfs-fluid-value()
gibt die flüssige Version eines Werts zurück, wenn die Eigenschaft neu skaliert werden muss.
In diesem Beispiel verwenden wir eines der integrierten Responsive-Breakpoint-Mixins von Bootstrap, um das Styling nur unterhalb des Breakpoints anzuwenden 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 */
}
}
Erweiterte Dokumentation
RFS ist ein separates Projekt der Bootstrap-Organisation. Weitere Informationen zu RFS und seiner Konfiguration finden Sie in seinem GitHub-Repository .