RFS

Què és RFS?

El projecte secundari RFS de Bootstrap és un motor de redimensionament d'unitats que es va desenvolupar inicialment per canviar la mida de la lletra (d'aquí la seva abreviatura de Mides de lletra responsives). Actualment, RFS és capaç de reescalar la majoria de propietats CSS amb valors unitaris com margin, padding, border-radius, o fins i tot box-shadow.

El mecanisme calcula automàticament els valors adequats en funció de les dimensions de la finestra gràfica del navegador. Es compilarà en calc()funcions amb una combinació d' remunitats i finestres visuals per habilitar el comportament d'escalat sensible.

Utilitzant RFS

Els mixins s'inclouen a Bootstrap i estan disponibles un cop inclogueu els de Bootstrap scss. RFS també es pot instal·lar autònom si cal.

Utilitzant els mixins

El rfs()mixin té abreviatura de font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, i padding-left. Vegeu l'exemple següent per a Sass font i CSS compilat.

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

Qualsevol altra propietat es pot passar al rfs()mixin així:

.selector {
  @include rfs(4rem, border-radius);
}

!importanttambé es pot afegir al valor que vulgueu:

.selector {
  @include padding(2.5rem !important);
}

Utilitzant les funcions

Quan no voleu utilitzar les inclusions, també hi ha dues funcions:

• rfs-value()converteix un valor en un remvalor si pxes passa un valor, en altres casos retorna el mateix resultat.
• rfs-fluid-value()retorna la versió fluida d'un valor si la propietat necessita reescalar.

En aquest exemple, utilitzem un dels mixins de punts d'interrupció responsius integrats de Bootstrap per aplicar només l'estil a sota del punt d' lginterrupció.

.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 */
  }
}

Documentació ampliada

RFS és un projecte independent de l'organització Bootstrap. Podeu trobar més informació sobre RFS i la seva configuració al seu repositori GitHub .