RFS
Bootstraps storleksändringsmotor skalar vanliga CSS-egenskaper för att bättre utnyttja tillgängligt utrymme över visningsportar och enheter.
Vad är RFS?
Bootstraps sidoprojekt RFS är en enhetsstorleksmotor som ursprungligen utvecklades för att ändra storlek på teckensnittsstorlekar (därav dess förkortning för Responsive Font Sizes). Nuförtiden kan RFS skala om de flesta CSS-egenskaper med enhetsvärden som margin
, padding
, border-radius
, eller till och med box-shadow
.
Mekanismen beräknar automatiskt lämpliga värden baserat på dimensionerna för webbläsarens vyport. Den kommer att kompileras till calc()
funktioner med en blandning av rem
och viewport-enheter för att möjliggöra responsiv skalningsbeteende.
Använder RFS
Blandningarna ingår i Bootstrap och är tillgängliga när du inkluderar Bootstraps scss
. RFS kan även installeras fristående vid behov.
Använda mixinerna
Mixin rfs()
har förkortningar för font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, och padding-left
. Se exemplet nedan för källkod Sass och kompilerad CSS.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Alla andra egenskaper kan skickas till rfs()
mixin så här:
.selector {
@include rfs(4rem, border-radius);
}
!important
kan också läggas till vilket värde du vill:
.selector {
@include padding(2.5rem !important);
}
Använda funktionerna
När du inte vill använda inkluderar finns det också två funktioner:
rfs-value()
konverterar ett värde till ettrem
värde om ettpx
värde passeras, i andra fall returnerar det samma resultat.rfs-fluid-value()
returnerar den flytande versionen av ett värde om egenskapen behöver skalas om.
I det här exemplet använder vi en av Bootstraps inbyggda responsiva brytpunktsmixer för att bara tillämpa styling under lg
brytpunkten.
.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 */
}
}
Utökad dokumentation
RFS är ett separat projekt under Bootstrap-organisationen. Mer om RFS och dess konfiguration kan hittas på dess GitHub-förråd .