RFS

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 remoch 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);
}

!importantkan 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 ett remvärde om ett pxvä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 lgbrytpunkten.

.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 .