מחשבון CSS Clamp()
חישוב ערך CSS clamp() זורם אמיתי מגודל מינימום ומקסימום על פני שני רוחבי חלון תצוגה, עם הצגה שלב אחר שלב של השיפוע והחיתוך ותצוגה מקדימה חיה לשינוי גודל.
🔒 מעובד כולו בדפדפן שלך - שום דבר שתזין כאן לא יועלה לעולם.
תוצאה
CSS clamp(MIN, PREFERRED, MAX) מאפשר להכרזה אחת להחליף ערימה שלמה של media queries: הערך נשאר על MIN מתחת לחלון התצוגה הקטן ביותר, על MAX מעל הגדול ביותר, ומשתנה בצורה חלקה ביניהם. החלק הקשה הוא הביטוי PREFERRED – ביטוי יחסי לחלון התצוגה כמו 0.833rem + 0.833vw – שאף אחד לא רוצה לגזור ידנית. מחשבון זה מחשב אותו באמת מארבעה מספרים: גודל מינימום, גודל מקסימום, ורוחב חלון התצוגה שבו כל אחד מהם חל.
כל מספר ביניים מוצג, לא רק השורה הסופית: השיפוע (כמה יחידות גודל הערך גדל לכל פיקסל של חלון תצוגה), אותו שיפוע מבוטא כמקדם vw, וחיתוך ציר ה-y – הקבוע שמתווסף לאיבר ה-vw כך שהקו יעבור בדיוק דרך שתי הנקודות שציינתם. כל מי שהדביק ערך clamp() ממדריך בלי להבין אותו יכול לראות, ולבדוק, את האריתמטיקה האמיתית כאן.
סליידר רוחב חלון תצוגה מניע תיבת תצוגה מקדימה חיה, כך שהשינוי הזורם בגודל נראה, לא רק מחושב: גררו אותו בין נקודות השבירה של המינימום והמקסימום וצפו בטקסט לדוגמה משתנה בגודלו בדיוק כפי שהיה משתנה בעת שינוי גודל חלון דפדפן אמיתי. שורת הפלט והפירוט מתעדכנים בכל הקשה – זה משתלב באופן טבעי עם ממיר ה-px ל-rem כאשר גם גודל הגופן הבסיסי עצמו זקוק להמרה.
עברו למצב סולם טיפוגרפי לקבלת מערכת טיפוגרפיה זורמת מלאה בצעד אחד: הזינו גודל בסיס ויחס מודולרי (1.125 עד 1.5) וקבלו שישה גדלים – small, base, h4, h3, h2 ו-h1 – כל אחד מחושב כשורת clamp() משלו בין התקדמות עדינה יותר במובייל לבין היחס המלא במחשב השולחני, מוכנים להעתקה כבלוק של משתני CSS מותאמים אישית.