איך אני מייצר clamp() ב-CSS לגודל גופן גמיש?

הזן גודל מינימלי (px), גודל מקסימלי (px), viewport מינימלי (px) ו-viewport מקסימלי (px). הכלי מפיק ערך CSS מוכן להעתקה, כגון clamp(1rem, ..., 2rem), עם ערך מועדף מבוסס vw בין שני הגדלים שלך.

האם עלי לבחור בפלט rem או px?

השתמש בבורר יחידת הפלט. עם rem, ערכי הפיקסלים מחולקים בגודל גופן שורש (px), ברירת המחדל 16, כך שהטקסט עוקב אחר הגדרת הגופן של הדפדפן של המשתמש. פלט בפיקסלים נותן ערכי px קבועים.

האם זה נותן לי מחלקת Tailwind?

כן. מתחת לערך ה-CSS יש מחלקת Tailwind, בצורה text-[clamp(...)], עם רווחים מוחלפים בקווים תחתונים. העתק אותה עם כפתור ההעתקה שלה. היא משתמשת בתחילית text-, אז ערוך אותה עבור מאפיינים אחרים.

למה זה מזהיר שהגודל המקסימלי שלי גדול מדי?

כאשר הגודל המקסימלי גדול יותר מפי 2.5 מהמינימום, מופיעה הערת נגישות: ייתכן שטקסט מוגדל לא יגיע ל-200 אחוז מגודלו (WCAG 1.4.4). שמור על מקסימום ב-2.5 כפול המינימום או פחות.

איך אני יכול לצפות בתצוגה מקדימה של התוצאה לפני השימוש?

גרור את פס התצוגה המקדימה לכל viewport מ-320 עד 1920px. טקסט הדוגמה וגודל הפיקסלים המחושב שלו מתעדכנים בזמן אמת, והגדלים מוצגים גם ב-viewport המינימלי, האמצעי והמקסימלי.

האם זה באמת בחינם?

כן. כל כלי הוא חינמי לשימוש, ללא צורך בחשבון או בכרטיס אשראי. העבודה מתבצעת במכשיר שלך ולא בשרתים שלנו, וזה מה שמאפשר להפעיל אותו בחינם.

האם זה עובד בנייד?

כן. זה פועל בדפדפנים ניידים עדכניים ב-iOS וב-Android, ללא התקנה.

📐

מחולל CSS clamp() בחינם

צור ערך CSS clamp() נזיל לטיפוגרפיה ורווחים רספונסיביים. הגדר גודל מינימלי/מקסימלי וטווח viewport, ראה תצוגה מקדימה חיה, והעתק את ה-CSS בשורה אחת.

פועל בדפדפן שלךללא הרשמה, ללא חלונות קופציםללא צורך בכניסהחינם לנצח

פועל לא-מקוון לאחר טעינה

גודל מינימלי (px)

גודל מקסימלי (px)

viewport מינימלי (px)

viewport מקסימלי (px)

יחידת פלט:

גודל גופן שורש (px)

ערך CSS

font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);

מחלקת Tailwind

text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]

גרור לתצוגה מקדימה של כל ויוופורטרוחב 768px → 21.9px

Aa 22px

גודל מעובד ב-viewports שונים

רוחב 375pxAa 16px

רוחב 908pxAa 24px

רוחב 1440pxAa 32px

clamp(min, preferred, max) משנה ערך בצורה נזילה עם ה-viewport ואז נועל אותו במינימום ובמקסימום. הוא מחליף ערימות של media queries לטיפוגרפיה, ריווח ורוחבים בשורה אחת.

שימושים נפוצים

צור טיפוגרפיה רספונסיבית נזילהקנה מידה בגדלי פונט בצורה חלקה בין נייד ושולחן עם שורה אחת.
קצבות נזילה ריפודקבל את מרווח הסעיף בצמוד לנמל הצפייה במקום לקפץ בנקודות הפסקה.
החלף שאילתות מדיה עם clamp()כפוף ערימות של כללי הפסקה לערך נזיל יחיד.
בנה סולם סוג נזילצור צעדי clamp() עקביים לסולם סוג מערכת עיצוב.
כותרות גיבור וטורי תצוגה נזילההפוך כותרות דפי נחיתה גדולות לקנה מידה בדרמתיות אך עדיין בטוח.

כיצד זה עובד

כלי זה מחשב ערכי CSS clamp() באמצעות נוסחת אינטרפולציה ליניארית כתובה-יד — ללא ספריות, ללא מסעות הלוך-חזור לשרת. אתה מזין שני גדלים ושני רוחבי חלון תצוגה; החשבון פועל מיד בדפדפן שלך ומפיק ביטוי clamp() מוכן-להדבקה עם ערך מועדף מבוסס-vw שמתאים בהדרגה את הטקסט או הריווח שלך בין נקודות השבירה הללו.

1
חישוב שיפוע ליניארי
הכלי מחשב שיפוע פיקסל-לפיקסל: (maxSize - minSize) / (maxViewport - minViewport). השיפוע הזה אז מומר ליחידות vw על ידי הכפלה ב-100, שזה הליבה של איך שקנה מידה יחסי-לחלון-תצוגה של CSS עובד.
2
גזירת נקודת חיתוך
היסט נקודת חיתוך (בפיקסלים או rem) מחושב כך שהפונקציה הליניארית פוגעת בדיוק בגודל המינימלי שלך בחלון התצוגה המינימלי. יחד, השיפוע ונקודת החיתוך יוצרים את הערך המועדף בתוך clamp() — החלק שבאמת מתאים בהדרגה.
3
המרת יחידות ועיצוב פלט
אם תבחר פלט rem, כל ערך פיקסל מחולק בגודל הגופן השורשי המוגדר שלך (ברירת מחדל 16px) לפני שהוא נכתב למחרוזת clamp(). נוצרת גם מחלקת ערך שרירותי תואמת של Tailwind, עם רווחים מוחלפים בקווים תחתונים לפי התחביר של Tailwind.
4
תצוגה מקדימה חיה במחוון חלון תצוגה
מחוון טווח מאפשר לך לגלול מ-320px עד 1920px רוחב. בכל מיקום אותה נוסחת שיפוע-ונקודת-חיתוך מעריכה את הגודל המוגבל בזמן אמת ומציגה טקסט לדוגמה בגודל הפיקסל המחושב, כך שתוכל לראות את התנהגות קנה המידה לפני העתקת משהו.