Υπολογιστής CSS Clamp().
Υπολογίστε μια πραγματική ρευστή τιμή CSS clamp() από ένα ελάχιστο και μέγιστο μέγεθος σε δύο πλάτη θυρών προβολής, με την κλίση και την τομή να εμφανίζονται βήμα προς βήμα και μια ζωντανή προεπισκόπηση αλλαγής μεγέθους.
Αποτέλεσμα
Ο σφιγκτήρας CSS (MIN, PREFERRED, MAX) επιτρέπει σε μια δήλωση να αντικαταστήσει μια ολόκληρη στοίβα ερωτημάτων μέσων: η τιμή παραμένει στο MIN κάτω από το μικρότερο παράθυρο προβολής, στο MAX πάνω από το μεγαλύτερο και κλιμακώνεται ομαλά στο ενδιάμεσο. Το δύσκολο μέρος είναι ο ΠΡΟΤΙΜΩΜΕΝΟΣ όρος — μια έκφραση σχετική με το viewport, όπως 0,833rem + 0,833vw — που κανείς δεν θέλει να αντλήσει με το χέρι. Αυτή η αριθμομηχανή τον υπολογίζει ως πραγματικό από τέσσερις αριθμούς: ένα ελάχιστο μέγεθος, ένα μέγιστο μέγεθος και το πλάτος της θύρας προβολής στο οποίο εφαρμόζεται ο καθένας.
Εμφανίζεται κάθε ενδιάμεσος αριθμός, όχι μόνο η τελική γραμμή: η κλίση (πόσες μονάδες μεγέθους αυξάνεται η τιμή ανά εικονοστοιχείο της θύρας προβολής), η ίδια κλίση που εκφράζεται ως συντελεστής vw και η τομή του άξονα y — η σταθερά που προστίθεται στον όρο vw, ώστε η γραμμή να διέρχεται ακριβώς από τα δύο σημεία που καθορίσατε. Όποιος έχει επικολλήσει μια τιμή clamp() από ένα σεμινάριο χωρίς να το κατανοήσει μπορεί να δει και να ελέγξει την πραγματική αριθμητική εδώ.
Ένα ρυθμιστικό πλάτους θυρίδας προβολής οδηγεί ένα ζωντανό πλαίσιο προεπισκόπησης, επομένως η ρευστή κλιμάκωση είναι ορατή, όχι απλώς υπολογισμένη: σύρετέ το μεταξύ των ελάχιστων και μέγιστων σημείων διακοπής και παρακολουθήστε το μέγεθος του δείγματος κειμένου ακριβώς όπως θα αλλάζει το μέγεθος ενός πραγματικού παραθύρου του προγράμματος περιήγησης. Η γραμμή εξόδου και η ενημέρωση ανάλυσης σε κάθε πάτημα πλήκτρων — αυτό συνδυάζεται φυσικά με τον μετατροπέα px σε rem όταν χρειάζεται μετατροπή και το ίδιο το βασικό μέγεθος γραμματοσειράς.
Μετάβαση σε λειτουργία κλίμακας τύπου για ένα πλήρες σύστημα τυπογραφίας ρευστού σε ένα βήμα: εισαγάγετε ένα βασικό μέγεθος και μια αρθρωτή αναλογία (1,125 έως 1,5) και λάβετε έξι μεγέθη — small, base, h4, h3, h2 και h1 — το καθένα υπολογίζεται ως η δική του γραμμή clamp() μεταξύ μιας πιο ήπιας εξέλιξης για φορητές συσκευές και του πλήρους προσαρμοσμένου μπλοκ αντιγραφής CSS ως ιδιοτήτων πλήρους προσαρμοσμένου αντιγράφου rat.