אם אתם בונים אתרים רספונסיביים, אתם יודעים שטיפוגרפיה יכולה להיות כאב ראש – במיוחד כשצריך לשלוט על גדלים בכל ברייקפוינט.
בדיוק בשביל זה יצרתי מחשבון + טבלה ל-clamp.
מה זה נותן לכם
clamp מאפשר להגדיר פונט דינמי שמתאים את עצמו לרוחב המסך עם גבולות ברורים, בלי media queries ובלי קפיצות.
מה יש בכלי?
מחשבון שמייצר לכם clamp אוטומטית
טבלה מוכנה עם גדלים נפוצים לשימוש מהיר
למה להשתמש בזה
- חוסך זמן
- קוד נקי יותר
- טיפוגרפיה חלקה ומדויקת
- פתרון מושלם לאלמנטור ולפיתוח בכלל
למי זה מתאים
לכל מי שבונה אתרים ורוצה לעבוד חכם יותר – מפתחים, מעצבים, ואנשי UX.
מחשבון Clamp (PX to REM)
| גודל פונט (px) | נוסחת CLAMP() מותאמת |
|---|---|
| 12 | clamp(0.75rem, 0.96vw + 0.12rem, 0.825rem) |
| 14 | clamp(0.875rem, 1.12vw + 0.14rem, 0.963rem) |
| 16 | clamp(1.0rem, 1.28vw + 0.16rem, 1.1rem) |
| 18 | clamp(1.125rem, 1.44vw + 0.18rem, 1.238rem) |
| 20 | clamp(1.25rem, 1.6vw + 0.2rem, 1.375rem) |
| 24 | clamp(1.5rem, 1.92vw + 0.24rem, 1.65rem) |
| 32 | clamp(2.0rem, 2.56vw + 0.32rem, 2.2rem) |
| 48 | clamp(3.0rem, 3.84vw + 0.48rem, 3.3rem) |
| 64 | clamp(4.0rem, 5.12vw + 0.64rem, 4.4rem) |
| 96 | clamp(6.0rem, 7.68vw + 0.96rem, 6.6rem) |