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

Ορίζετε δύο σημεία: ένα μέγεθος για μικρό πλάτος οθόνης και ένα μέγεθος για μεγάλο πλάτος. Ο υπολογιστής σχεδιάζει μια ευθεία γραμμή ανάμεσά τους, ώστε το μέγεθος να αυξάνεται ομαλά καθώς η οθόνη πλαταίνει, και στη συνέχεια το περιβάλλει με τη συνάρτηση clamp() ώστε να μην πέφτει ποτέ κάτω από το ελάχιστο μέγεθος ή να μην ξεπερνά το μέγιστο. Ανάμεσα στα δύο πλάτη, το μέγεθος προσαρμόζεται ρευστά (fluidly), ενώ έξω από αυτά παραμένει σταθερό στο πλησιέστερο όριο.

Τα όρια εκφράζονται σε rem και το μεταβαλλόμενο μεσαίο τμήμα διατηρεί ένα στοιχείο rem, έτσι ώστε το κείμενο να εξακολουθεί να μεγαλώνει όταν ο αναγνώστης κάνει ζουμ ή αυξάνει την προεπιλεγμένη γραμματοσειρά του περιηγητή του — κάτι που μια τιμή που βασίζεται αποκλειστικά σε pixel ή viewport μπορεί να εμποδίσει. Πληκτρολογείτε τα μεγέθη σε pixel επειδή έτσι είναι πιο εύκολο να τα σκεφτείτε, και το εργαλείο τα μετατρέπει σε rem με βάση το βασικό μέγεθος γραμματοσειράς (root font size) που ορίζετε.

Ναι. Η ίδια τιμή λειτουργεί για padding, margin, gap, width ή height — οπουδήποτε χρησιμοποιείται μέγεθος μήκους. Αλλάξτε την προεπισκόπηση σε «Πλαίσιο» (Box) για να δείτε το κενό να αυξάνεται αντί για το κείμενο. Εάν το ελάχιστο και το μέγιστο μέγεθός σας είναι ίδια, το αποτέλεσμα απλοποιείται σε ένα απλό σταθερό μήκος, καθώς δεν υπάρχει κάτι προς κλιμάκωση.

Ναι — όλοι οι σύγχρονοι περιηγητές υποστηρίζουν τη συνάρτηση clamp() από το 2020, επομένως μπορείτε να χρησιμοποιήσετε την τιμή ως έχει χωρίς εναλλακτικές λύσεις (fallbacks). Σε περίπτωση πολύ μεγάλου μέγιστου ορίου ή γρήγορου ρυθμού μεταβολής, καλό είναι να κάνετε έναν γρήγορο έλεγχο με ζουμ 200% για να βεβαιωθείτε ότι το κείμενο εξακολουθεί να μεγεθύνεται για τους αναγνώστες που το χρειάζονται.