RFS

Co to jest RFS?

Poboczny projekt Bootstrapa, RFS , to silnik zmiany rozmiaru jednostek, który początkowo został opracowany w celu zmiany rozmiaru czcionek (stąd jego skrót od Responsive Font Sizes). Obecnie RFS jest w stanie przeskalować większość właściwości CSS za pomocą wartości jednostkowych, takich jak margin, padding, border-radiuslub nawet box-shadow.

Mechanizm automatycznie oblicza odpowiednie wartości na podstawie wymiarów rzutni przeglądarki. Zostanie skompilowany w calc()funkcje z mieszanką jednostek remi rzutni, aby umożliwić responsywne zachowanie skalowania.

Korzystanie z RFS

Mixiny są zawarte w Bootstrap i są dostępne po dołączeniu Bootstrap's scss. W razie potrzeby RFS można również zainstalować samodzielnie .

Korzystanie z mixinów

Mixin rfs()ma skróty dla font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, i padding-left. Zobacz poniższy przykład dla źródła Sass i skompilowanego CSS.

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

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

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

Każda inna właściwość może zostać przekazana do rfs()mixina w następujący sposób:

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

!importantmożna również po prostu dodać do dowolnej wartości:

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

Korzystanie z funkcji

Jeśli nie chcesz korzystać z dołączeń, dostępne są również dwie funkcje:

• rfs-value()konwertuje wartość na remwartość, jeśli pxwartość jest przekazywana, w innych przypadkach zwraca ten sam wynik.
• rfs-fluid-value()zwraca płynną wersję wartości, jeśli właściwość wymaga przeskalowania.

W tym przykładzie używamy jednego z wbudowanych w Bootstrap responsywnych mixinów punktów przerwania, aby zastosować stylizację tylko poniżej lgpunktu przerwania.

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

Rozszerzona dokumentacja

RFS to osobny projekt w ramach organizacji Bootstrap. Więcej o RFS i jego konfiguracji można znaleźć w jego repozytorium GitHub .