RFS
Modul pro změnu velikosti Bootstrapu citlivě škáluje běžné vlastnosti CSS, aby lépe využíval dostupný prostor mezi výřezy a zařízeními.
Co je RFS?
Bootstrapův vedlejší projekt RFS je modul pro změnu velikosti jednotek, který byl původně vyvinut pro změnu velikosti písma (odtud jeho zkratka pro Responsive Font Sizes). V současné době je RFS schopen změnit měřítko většiny vlastností CSS s hodnotami jednotek jako margin
, padding
, border-radius
, nebo dokonce box-shadow
.
Mechanismus automaticky vypočítá příslušné hodnoty na základě rozměrů výřezu prohlížeče. Bude zkompilován do calc()
funkcí s kombinací jednotek rem
a jednotek zobrazení, aby bylo možné reagovat na změnu měřítka.
Pomocí RFS
Mixiny jsou součástí Bootstrapu a jsou dostupné, jakmile zahrnete Bootstrap's scss
. RFS lze v případě potřeby nainstalovat i samostatně .
Pomocí mixinů
Mixin rfs()
má zkratky pro font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
a padding-left
. Podívejte se na příklad níže pro zdrojový Sass a zkompilovaný CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Jakákoli jiná vlastnost může být předána rfs()
mixinu takto:
.selector {
@include rfs(4rem, border-radius);
}
!important
lze také přidat k jakékoli hodnotě, kterou chcete:
.selector {
@include padding(2.5rem !important);
}
Použití funkcí
Pokud nechcete používat zahrnuté, existují také dvě funkce:
rfs-value()
převede hodnotu narem
hodnotu, pokud jepx
hodnota předána, v ostatních případech vrátí stejný výsledek.rfs-fluid-value()
vrátí proměnlivou verzi hodnoty, pokud vlastnost potřebuje změnit měřítko.
V tomto příkladu používáme jeden z integrovaných responzivních mixů bodů přerušení Bootstrap k použití stylů pouze pod bodem lg
přerušení.
.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 */
}
}
Rozšířená dokumentace
RFS je samostatný projekt pod organizací Bootstrap. Více o RFS a jeho konfiguraci najdete na jeho úložišti GitHub .