RFS

Hvað er RFS?

Hliðarverkefni Bootstrap RFS er vél til að breyta stærð eininga sem var upphaflega þróuð til að breyta stærð leturstærðar (þar af leiðandi skammstöfunin fyrir Responsive Font Sizes). Nú á dögum er RFS fær um að endurskala flestar CSS eignir með einingagildum eins og margin, padding, border-radius, eða jafnvel box-shadow.

Vélbúnaðurinn reiknar sjálfkrafa út viðeigandi gildi byggt á víddum útsýnisgáttar vafrans. Það verður sett saman í calc()aðgerðir með blöndu af remog útsýniseiningum til að virkja móttækilega kvarðahegðun.

Notaðu RFS

Blöndurnar eru innifaldar í Bootstrap og eru fáanlegar þegar þú tekur Bootstrap's með scss. RFS er einnig hægt að setja upp sjálfstætt ef þörf krefur.

Notaðu mixin

Mixin rfs()hefur styttingar fyrir font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomog padding-left. Sjá dæmið hér að neðan fyrir uppruna Sass og samansett CSS.

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

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

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

Hægt er að senda allar aðrar eignir í blönduna á rfs()þennan hátt:

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

!importantgetur líka bara bætt við hvaða gildi sem þú vilt:

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

Að nota aðgerðirnar

Þegar þú vilt ekki nota innihaldið eru líka tvær aðgerðir:

• rfs-value()breytir gildi í remgildi ef pxgildi er staðist, í öðrum tilfellum skilar það sömu niðurstöðu.
• rfs-fluid-value()skilar fljótandi útgáfu gildis ef eignin þarfnast endurskala.

Í þessu dæmi notum við eina af innbyggðu móttækilegu brotpunktablöndunum Bootstrap til að nota aðeins stíl undir brotpunktinum lg.

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

Útvíkkuð skjöl

RFS er sérstakt verkefni undir Bootstrap samtökunum. Meira um RFS og uppsetningu þess er að finna á GitHub geymslunni .