Γεννήτρια CSS clamp() δωρεάν
Δημιουργήστε μια ρευστή τιμή CSS clamp() για ανταποκρινόμενη τυπογραφία και απόσταση. Ορίστε ελάχιστο/μέγιστο μέγεθος και εύρος παρατηρητικής θύρας, δείτε ζωντανή προεπισκόπηση και αντιγράψτε το CSS.
Αποδοθέν μέγεθος σε διαφορετικά viewports
Το clamp(min, preferred, max) κλιμακώνει μια τιμή ομαλά με το viewport και την κλειδώνει στο ελάχιστο και μέγιστο. Αντικαθιστά σειρές media queries για τυπογραφία, απόσταση και πλάτη με μια γραμμή.
Συνηθισμένες χρήσεις
- Δημιουργήστε ρευστή αντιδραστική τυπογραφίαΚλίμακα μεγέθη γραμματοσειράς ομαλά μεταξύ κινητού και υπολογιστή με μία γραμμή.
- Ρευστά περιθώρια και άφιξηΚάντε το διάστημα ενότητας να αυξηθεί με την προβολή αντί να πηδήξει στα σημεία διακοπής.
- Αντικαταστήστε τα μέσα ερωτημάτων με clamp()Σμίξτε στοίβες παρακάμψεων σημείων διακοπής σε μια μόνο ρευστή τιμή.
- Δημιουργήστε μια ρευστή κλίμακα τύπουΔημιουργήστε συνεπή βήματα clamp() για μια κλίμακα τύπου συστήματος σχεδιασμού.
- Ρευστό ήρωας και επιδείξη επικεφαλίδεςΚάντε τις μεγάλες επικεφαλίδες σελίδας προσγείωσης να κλιμακωθούν δραματικά, αλλά εξακολουθεί να είναι ασφαλής.
Πώς λειτουργεί
Αυτό το εργαλείο υπολογίζει τιμές CSS clamp() με χειρόγραφο τύπο γραμμικής παρεμβολής — χωρίς βιβλιοθήκες ή επικοινωνία με διακομιστή. Εισαγάγετε δύο μεγέθη και δύο πλάτη viewport· τα μαθηματικά εκτελούνται αμέσως στον browser και παράγουν μια έκφραση clamp() έτοιμη για επικόλληση, με προτιμώμενη τιμή βασισμένη σε vw που κλιμακώνει ομαλά τη γραμματοσειρά ή τα διαστήματα μεταξύ αυτών των σημείων.
- 1Υπολογισμός γραμμικής κλίσηςΤο εργαλείο υπολογίζει κλίση pixel ανά pixel: (maxSize - minSize) / (maxViewport - minViewport). Η κλίση μετατρέπεται σε μονάδες vw πολλαπλασιάζοντας με 100, που είναι ο πυρήνας της κλιμάκωσης σχετικά με το viewport στο CSS.
- 2Υπολογισμός σταθερού όρουΥπολογίζεται μια μετατόπιση (σε px ή rem) ώστε η γραμμική συνάρτηση να δίνει ακριβώς το ελάχιστο μέγεθός σας στο ελάχιστο viewport. Μαζί, κλίση και σταθερός όρος σχηματίζουν την προτιμώμενη τιμή μέσα στο clamp() — το τμήμα που πραγματικά κλιμακώνεται.
- 3Μετατροπή μονάδων και μορφοποίηση εξόδουΑν επιλέξετε έξοδο σε rem, κάθε τιμή pixel διαιρείται με το ορισμένο root font size (προεπιλογή 16px) πριν γραφτεί στη συμβολοσειρά clamp(). Παράγεται επίσης αντίστοιχη κλάση arbitrary-value του Tailwind, με τα κενά να αντικαθίστανται από κάτω παύλες σύμφωνα με τη σύνταξη του Tailwind.
- 4Ζωντανή προεπισκόπηση με ρυθμιστικό viewportΈνα ρυθμιστικό σάς επιτρέπει να μετακινηθείτε από 320px έως 1920px πλάτος. Σε κάθε θέση ο ίδιος τύπος κλίσης και σταθερού όρου υπολογίζει το περιορισμένο μέγεθος σε πραγματικό χρόνο και αποδίδει δείγμα κειμένου σε αυτό το μέγεθος, ώστε να βλέπετε τη συμπεριφορά κλιμάκωσης πριν αντιγράψετε οτιδήποτε.
Σχετικά εργαλεία
Γεννήτρια CSS Grid
Σχεδιάστε οπτικά ένα CSS grid — tracks, units και gaps — και αντιγράψτε το generated CSS και HTML.
Ποια Είναι η Ανάλυση της Οθόνης Μου
Δείτε την ανάλυση της οθόνης σας σε CSS και πραγματικά pixel, το μέγεθος παραθύρου, την αναλογία pixel, το βάθος χρώματος, HDR, υποστήριξη αφής και ρυθμό ανανέωσης και αντιγράψτε τα όλα.
Δημιουργία υπογραφής
Σχεδιάστε μια υπογραφή με το ποντίκι, το δάχτυλο ή γραφίδα, ή πληκτρολογήστε το όνομά σας σε γραμματοσειρά χειρογράφου, και εξαγάγετέ την ως διαφανές PNG ή SVG.