RFS

Τι είναι το RFS;

Το δευτερεύον έργο RFS του Bootstrap είναι μια μηχανή αλλαγής μεγέθους μονάδας που αρχικά αναπτύχθηκε για να αλλάξει το μέγεθος των γραμματοσειρών (εξ ου και η συντομογραφία του για Responsive Font Sizes). Σήμερα, το RFS είναι ικανό να αναβαθμίζει τις περισσότερες ιδιότητες CSS με τιμές μονάδας όπως margin, padding, border-radiusή ακόμα και box-shadow.

Ο μηχανισμός υπολογίζει αυτόματα τις κατάλληλες τιμές με βάση τις διαστάσεις της θύρας προβολής του προγράμματος περιήγησης. Θα μεταγλωττιστεί σε calc()συναρτήσεις με συνδυασμό remμονάδων και θυρών προβολής για να ενεργοποιηθεί η συμπεριφορά κλιμάκωσης απόκρισης.

Χρήση RFS

Τα mixins περιλαμβάνονται στο Bootstrap και είναι διαθέσιμα μόλις συμπεριλάβετε το Bootstrap scss. Το RFS μπορεί επίσης να εγκατασταθεί αυτόνομα εάν χρειάζεται.

Χρησιμοποιώντας τα mixins

Το rfs()mixin έχει συντομογραφίες για font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomκαι padding-left. Δείτε το παρακάτω παράδειγμα για το πηγαίο Sass και το μεταγλωττισμένο CSS.

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

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

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

Οποιαδήποτε άλλη ιδιότητα μπορεί να περάσει στο rfs()mixin ως εξής:

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

!importantμπορεί επίσης να προστεθεί σε όποια αξία θέλετε:

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

Χρησιμοποιώντας τις λειτουργίες

Όταν δεν θέλετε να χρησιμοποιήσετε τα περιλαμβάνει, υπάρχουν επίσης δύο λειτουργίες:

• rfs-value()μετατρέπει μια τιμή σε remτιμή εάν pxπεράσει μια τιμή, σε άλλες περιπτώσεις επιστρέφει το ίδιο αποτέλεσμα.
• rfs-fluid-value()επιστρέφει τη ρευστή έκδοση μιας τιμής εάν η ιδιότητα χρειάζεται αλλαγή κλίμακας.

Σε αυτό το παράδειγμα, χρησιμοποιούμε μία από τις ενσωματωμένες μίξεις σημείων διακοπής απόκρισης του Bootstrap για να εφαρμόσουμε στυλ μόνο κάτω από το 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 */
  }
}

Εκτεταμένη τεκμηρίωση

Το RFS είναι ένα ξεχωριστό έργο υπό τον οργανισμό Bootstrap. Περισσότερα για το RFS και τη διαμόρφωσή του μπορείτε να βρείτε στο αποθετήριο GitHub .