Υπολογιστής CSS Clamp()

Η CSS clamp(MIN, PREFERRED, MAX) επιτρέπει σε μία δήλωση να αντικαταστήσει ένα σωρό media queries: η τιμή παραμένει στο MIN κάτω από το μικρότερο viewport, στο MAX πάνω από το μεγαλύτερο και κλιμακώνεται ομαλά ενδιάμεσα. Το δύσκολο μέρος είναι ο όρος PREFERRED — μια έκφραση σχετική με το viewport όπως το 0.833rem + 0.833vw — που κανείς δεν θέλει να υπολογίσει στο χέρι. Αυτός ο υπολογιστής τον υπολογίζει πραγματικά από τέσσερις αριθμούς: ένα ελάχιστο μέγεθος, ένα μέγιστο μέγεθος και το πλάτος viewport στο οποίο εφαρμόζεται το καθένα.

Κάθε ενδιάμεσος αριθμός εμφανίζεται, όχι μόνο η τελική γραμμή: η κλίση (πόσες μονάδες μεγέθους αυξάνεται η τιμή ανά pixel viewport), η ίδια κλίση εκφρασμένη ως συντελεστής vw και η τομή στον άξονα y — η σταθερά που προστίθεται στον όρο vw ώστε η γραμμή να περνά ακριβώς από τα δύο σημεία που ορίσατε. Όποιος έχει επικολλήσει μια τιμή clamp() από κάποιο tutorial χωρίς να την καταλαβαίνει μπορεί να δει και να ελέγξει την πραγματική αριθμητική εδώ.

Ένας ρυθμιστής viewport-width οδηγεί ένα πεδίο ζωντανής προεπισκόπησης, ώστε η ρευστή κλιμάκωση να είναι ορατή, όχι απλώς υπολογισμένη: σύρετέ τον ανάμεσα στα ελάχιστα και μέγιστα breakpoints και δείτε το δείγμα κειμένου να αλλάζει μέγεθος ακριβώς όπως θα άλλαζε όταν ένα πραγματικό παράθυρο περιηγητή αλλάζει μέγεθος. Η γραμμή εξόδου και η ανάλυση ενημερώνονται με κάθε πληκτρολόγηση — αυτό συνδυάζεται φυσικά με τον μετατροπέα px σε rem όταν χρειάζεται μετατροπή και του ίδιου του βασικού μεγέθους γραμματοσειράς.

Μεταβείτε στη λειτουργία type-scale για ένα πλήρες ρευστό σύστημα τυπογραφίας σε ένα βήμα: εισαγάγετε ένα βασικό μέγεθος και μια αρθρωτή αναλογία (1.125 έως 1.5) και πάρτε έξι μεγέθη — μικρό, βάση, h4, h3, h2 και h1 — το καθένα υπολογισμένο ως δική του γραμμή clamp() ανάμεσα σε μια ηπιότερη πρόοδο για κινητά και την πλήρη αναλογία για επιτραπέζιους υπολογιστές, έτοιμα προς αντιγραφή ως μπλοκ CSS custom properties.