RFS

RFS nedir?

Bootstrap'in yan projesi RFS , başlangıçta yazı tipi boyutlarını yeniden boyutlandırmak için geliştirilmiş bir birim yeniden boyutlandırma motorudur (dolayısıyla Duyarlı Yazı Tipi Boyutlarının kısaltmasıdır). marginGünümüzde RFS, çoğu CSS özelliğini , padding, border-radiusve hatta gibi birim değerleriyle yeniden ölçeklendirme yeteneğine sahiptir box-shadow.

Mekanizma, tarayıcı görünüm alanının boyutlarına göre uygun değerleri otomatik olarak hesaplar. Duyarlı ölçekleme davranışını etkinleştirmek için görünüm ve görünüm birimlerinin calc()bir karışımıyla işlevler halinde derlenecektir .rem

RFS'yi kullanma

Karışımlar Bootstrap'a dahildir ve Bootstrap's scss. RFS, gerekirse bağımsız olarak da kurulabilir .

Karışımları kullanma

Karışımın , , , , , , , , , ve rfs()için kısayolları vardır . Kaynak Sass ve derlenmiş CSS için aşağıdaki örneğe bakın.font-sizemarginmargin-topmargin-rightmargin-bottommargin-leftpaddingpadding-toppadding-rightpadding-bottompadding-left

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

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

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

Karışıma başka herhangi bir özellik şu şekilde iletilebilir rfs():

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

!importantayrıca istediğiniz değere eklenebilir:

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

Fonksiyonları kullanma

İçeriği kullanmak istemediğinizde ayrıca iki işlev vardır:

• rfs-value()rembir değer geçirilirse değeri değere dönüştürür px, diğer durumlarda aynı sonucu verir.
• rfs-fluid-value()özelliğin yeniden ölçeklendirilmesi gerekiyorsa bir değerin değişken sürümünü döndür��r.

Bu örnekte, yalnızca kesme noktasının altında stil uygulamak için Bootstrap'ın yerleşik duyarlı kesme noktası karışımlarındanlg birini kullanıyoruz .

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

Genişletilmiş belgeler

RFS, Bootstrap organizasyonu altında ayrı bir projedir. RFS ve yapılandırması hakkında daha fazla bilgiyi GitHub deposunda bulabilirsiniz .