RFS
De motor foar feroarjen fan grutte fan Bootstrap skaalt op responsive manier mienskiplike CSS-eigenskippen om de beskikbere romte better te brûken oer viewports en apparaten.
Wat is RFS?
Bootstrap's sydprojekt RFS is in ienheidsferoaringsmotor dy't yn earste ynstânsje waard ûntwikkele om lettertypegrutte te feroarjen (dêrfandinne syn ôfkoarting foar Responsive Font Sizes). Tsjintwurdich is RFS yn steat om de measte CSS-eigenskippen opnij te skaaljen mei ienheidswearden lykas margin
, padding
, border-radius
, of sels box-shadow
.
It meganisme automatysk berekkent de passende wearden basearre op de ôfmjittings fan de browser viewport. It sil wurde gearstald yn calc()
funksjes mei in miks fan rem
en viewport-ienheden om it responsive skaalgedrach mooglik te meitsjen.
Mei help fan RFS
De mixins binne opnommen yn Bootstrap en binne beskikber as jo ienris Bootstrap's opnimme scss
. RFS kin ek standalone ynstalleare as it nedich is.
Mei help fan mixins
De rfs()
mixin hat shorthands foar font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, en padding-left
. Sjoch it foarbyld hjirûnder foar boarne Sass en kompilearre CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Elke oare eigendom kin sa trochjûn wurde oan 'e rfs()
mixin:
.selector {
@include rfs(4rem, border-radius);
}
!important
kin ek gewoan tafoege wurde oan hokker wearde jo wolle:
.selector {
@include padding(2.5rem !important);
}
It brûken fan de funksjes
As jo de omfettet net wolle brûke, binne d'r ek twa funksjes:
rfs-value()
konvertearret in wearde yn inrem
wearde as inpx
wearde wurdt trochjûn, yn oare gefallen jout it itselde resultaat.rfs-fluid-value()
jout de floeiende ferzje fan in wearde werom as it pân opnij skalen moat.
Yn dit foarbyld brûke wy ien fan Bootstrap's ynboude responsive brekpuntmixins om allinich styling ûnder it lg
brekpunt oan te passen.
.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 */
}
}
Útwreide dokumintaasje
RFS is in apart projekt ûnder de Bootstrap-organisaasje. Mear oer RFS en syn konfiguraasje is te finen op syn GitHub repository .