RFS
El motor de cambio de tamaño de Bootstrap escala de manera receptiva las propiedades CSS comunes para utilizar mejor el espacio disponible en las ventanas gráficas y los dispositivos.
¿Qué es RFS?
El proyecto paralelo de Bootstrap, RFS , es un motor de cambio de tamaño de unidades que se desarrolló inicialmente para cambiar el tamaño de las fuentes (de ahí su abreviatura de Responsive Font Sizes). Hoy en día, RFS es capaz de cambiar la escala de la mayoría de las propiedades CSS con valores unitarios como margin
, padding
, border-radius
o incluso box-shadow
.
El mecanismo calcula automáticamente los valores apropiados en función de las dimensiones de la ventana gráfica del navegador. Se compilará en calc()
funciones con una combinación de rem
unidades de ventana gráfica para habilitar el comportamiento de escalado receptivo.
Uso de RFS
Los mixins están incluidos en Bootstrap y están disponibles una vez que incluye Bootstrap's scss
. RFS también se puede instalar de forma independiente si es necesario.
Usando los mixins
El rfs()
mixin tiene abreviaturas para font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
y padding-left
. Vea el ejemplo a continuación para la fuente Sass y el CSS compilado.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Cualquier otra propiedad se puede pasar a la rfs()
mezcla de esta manera:
.selector {
@include rfs(4rem, border-radius);
}
!important
también se puede agregar al valor que desee:
.selector {
@include padding(2.5rem !important);
}
Usando las funciones
Cuando no desea utilizar los incluidos, también hay dos funciones:
rfs-value()
convierte un valor en unrem
valor sipx
se pasa un valor, en otros casos devuelve el mismo resultado.rfs-fluid-value()
devuelve la versión fluida de un valor si es necesario cambiar la escala de la propiedad.
En este ejemplo, usamos uno de los mixins de puntos de interrupción receptivos incorporados de Bootstrap para aplicar solo estilo debajo del punto de lg
interrupción.
.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ón extendida
RFS es un proyecto separado bajo la organización Bootstrap. Puede encontrar más información sobre RFS y su configuración en su repositorio de GitHub .