RFS
Il motore di ridimensionamento di Bootstrap ridimensiona in modo reattivo le proprietà CSS comuni per utilizzare meglio lo spazio disponibile su viewport e dispositivi.
Cos'è RFS?
Il progetto collaterale di Bootstrap RFS è un motore di ridimensionamento delle unità che è stato inizialmente sviluppato per ridimensionare le dimensioni dei caratteri (da cui la sua abbreviazione di Responsive Font Sizes). Al giorno d'oggi RFS è in grado di ridimensionare la maggior parte delle proprietà CSS con valori di unità come margin
, padding
, border-radius
o anche box-shadow
.
Il meccanismo calcola automaticamente i valori appropriati in base alle dimensioni della finestra del browser. Verrà compilato in calc()
funzioni con un mix di rem
unità viewport per abilitare il comportamento di ridimensionamento reattivo.
Utilizzo di RFS
I mixin sono inclusi in Bootstrap e sono disponibili dopo aver incluso Bootstrap's scss
. RFS può anche essere installato standalone, se necessario.
Usando i mixin
Il rfs()
mixin ha scorciatoie per font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, e padding-left
. Vedere l'esempio seguente per Sass sorgente e CSS compilato.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Qualsiasi altra proprietà può essere passata al rfs()
mixin in questo modo:
.selector {
@include rfs(4rem, border-radius);
}
!important
può anche essere semplicemente aggiunto a qualsiasi valore desideri:
.selector {
@include padding(2.5rem !important);
}
Utilizzo delle funzioni
Quando non vuoi usare include, ci sono anche due funzioni:
rfs-value()
converte un valore in unrem
valore sepx
viene passato un valore, negli altri casi restituisce lo stesso risultato.rfs-fluid-value()
restituisce la versione fluida di un valore se è necessario ridimensionare la proprietà.
In questo esempio, utilizziamo uno dei mixin di punti di interruzione reattivi incorporati di Bootstrap per applicare lo stile solo al di sotto del punto di lg
interruzione.
.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 */
}
}
Documentazione estesa
RFS è un progetto separato nell'ambito dell'organizzazione Bootstrap. Maggiori informazioni su RFS e la sua configurazione possono essere trovate sul suo repository GitHub .