RFS
Le moteur de redimensionnement de Bootstrap met à l'échelle de manière réactive les propriétés CSS courantes pour mieux utiliser l'espace disponible dans les fenêtres et les appareils.
Qu'est-ce que RFS ?
Le projet parallèle de Bootstrap RFS est un moteur de redimensionnement d'unité qui a été initialement développé pour redimensionner les tailles de police (d'où son abréviation pour Responsive Font Sizes). De nos jours, RFS est capable de redimensionner la plupart des propriétés CSS avec des valeurs unitaires telles que margin
, padding
, border-radius
ou même box-shadow
.
Le mécanisme calcule automatiquement les valeurs appropriées en fonction des dimensions de la fenêtre du navigateur. Il sera compilé en calc()
fonctions avec un mélange d' rem
unités et de fenêtres pour permettre le comportement de mise à l'échelle réactif.
Utilisation de RFS
Les mixins sont inclus dans Bootstrap et sont disponibles une fois que vous avez inclus le fichier scss
. RFS peut également être installé de manière autonome si nécessaire.
Utilisation des mixins
Le rfs()
mixin a des raccourcis pour font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, et padding-left
. Voir l'exemple ci-dessous pour la source Sass et le CSS compilé.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Toute autre propriété peut être transmise au rfs()
mixin comme ceci :
.selector {
@include rfs(4rem, border-radius);
}
!important
peut également être simplement ajouté à la valeur de votre choix :
.selector {
@include padding(2.5rem !important);
}
Utilisation des fonctions
Lorsque vous ne souhaitez pas utiliser les inclusions, il existe également deux fonctions :
rfs-value()
convertit une valeur en unerem
valeur si unepx
valeur est passée, dans les autres cas, il renvoie le même résultat.rfs-fluid-value()
renvoie la version fluide d'une valeur si la propriété doit être redimensionnée.
Dans cet exemple, nous utilisons l'un des mixins de points d'arrêt réactifs intégrés de Bootstrap pour appliquer uniquement le style sous le point d' lg
arrêt.
.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 */
}
}
Documentation étendue
RFS est un projet distinct de l'organisation Bootstrap. Vous trouverez plus d'informations sur RFS et sa configuration sur son référentiel GitHub .