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 valeur rem si une valeur px 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.