RFS

Apa itu RFS?

Projek sampingan Bootstrap RFS ialah enjin saiz semula unit yang pada mulanya dibangunkan untuk mengubah saiz fon (oleh itu singkatannya untuk Saiz Fon Responsif). Pada masa kini RFS mampu menskala semula kebanyakan sifat CSS dengan nilai unit seperti margin, padding, border-radius, atau malah box-shadow.

Mekanisme secara automatik mengira nilai yang sesuai berdasarkan dimensi ruang pandang penyemak imbas. Ia akan disusun ke dalam calc()fungsi dengan gabungan remdan unit port pandang untuk membolehkan tingkah laku penskalaan responsif.

Menggunakan RFS

Mixin disertakan dalam Bootstrap dan tersedia sebaik sahaja anda memasukkan Bootstrap's scss. RFS juga boleh dipasang kendiri jika diperlukan.

Menggunakan campuran

Mixin rfs()mempunyai singkatan untuk font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, dan padding-left. Lihat contoh di bawah untuk sumber Sass dan CSS yang disusun.

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

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

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

Sebarang harta lain boleh dihantar ke rfs()mixin seperti ini:

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

!importantboleh juga hanya ditambah kepada nilai yang anda mahukan:

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

Menggunakan fungsi

Apabila anda tidak mahu menggunakan termasuk, terdapat juga dua fungsi:

• rfs-value()menukar nilai kepada remnilai jika pxnilai diluluskan, dalam kes lain ia mengembalikan hasil yang sama.
• rfs-fluid-value()mengembalikan versi cecair nilai jika harta itu memerlukan penskalaan semula.

Dalam contoh ini, kami menggunakan salah satu campuran titik putus responsif terbina dalam Bootstrap untuk hanya menggunakan penggayaan di bawah lgtitik putus.

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

Dokumentasi lanjutan

RFS ialah projek berasingan di bawah organisasi Bootstrap. Lebih lanjut mengenai RFS dan konfigurasinya boleh didapati pada repositori GitHubnya .