Γεννήτρια Fluid Spacing Clamp().
Υπολογίστε μια πραγματική ρευστή τιμή CSS clamp() από ένα ελάχιστο και μέγιστο μέγεθος σε δύο πλάτη θυρών προβολής, με την κλίση και την τομή να εμφανίζονται βήμα προς βήμα και μια ζωντανή προεπισκόπηση αλλαγής μεγέθους.
Αποτέλεσμα
Η CSS clamp() λειτουργεί ακριβώς με τον ίδιο τρόπο για την απόσταση όπως και για το μέγεθος γραμματοσειράς — η ιδιότητα απλώς τυχαίνει να είναι περιθώριο, padding ή κενό αντί για μέγεθος γραμματοσειράς. Αυτή η σελίδα ανοίγει την αριθμομηχανή με εύρος 8 εικονοστοιχείων έως 32 εικονοστοιχείων σε μια θύρα προβολής 320 εικονοστοιχείων έως 1280 εικονοστοιχείων, ένα συνηθισμένο βήμα για την αναπλήρωση ενοτήτων ή τα κενά της κάρτας που θα πρέπει να φαίνονται σφιχτά σε ένα τηλέφωνο και ευρύχωρα σε έναν επιτραπέζιο υπολογιστή χωρίς να φαίνεται ένα ερώτημα πολυμέσων.
Τα υποκείμενα μαθηματικά δεν ενδιαφέρονται για το τι αντιπροσωπεύουν οι αριθμοί: ο ίδιος τύπος κλίσης και τομής άξονα y που παράγει ένα μέγεθος επικεφαλίδας ρευστού παράγει μια τιμή απόστασης ρευστού, επομένως η ανάλυση παρακάτω δείχνει ακριβώς πώς τα 8px και τα 32px μετατρέπονται σε μια γραμμή clamp() έτοιμη για αντιγραφή για padding: clamp(...).
Σύρετε το ρυθμιστικό πλάτους προβολής για να κάνετε προεπισκόπηση της αίσθησης της απόστασης σε οποιοδήποτε πλάτος μεταξύ των δύο σημείων διακοπής, προσαρμόστε τις ελάχιστες και μέγιστες τιμές για πιο στενό ή πιο χαλαρό εύρος και αντιγράψτε την τελική γραμμή κατευθείαν σε όποια ιδιότητα διαστήματος χρειάζεται.