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 fonctions calc()
avec un mélange d'unités rem
et de fenêtre d'affichage pour activer 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 scss
de Bootstrap. RFS peut également être installé de manière autonome si nécessaire.
Utilisation des mixins
Le mixin rfs()
contient des raccourcis pour font-size
, margin
, margin-top
, < code>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 passée au mixin rfs()
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 une valeurrem
si une valeurpx
est passée, dans les autres cas, il renvoie la même chose 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 lg
point d'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 responsive breakpoint mixins.