מחשבון CSS Clamp()

CSS clamp(MIN, PREFERRED, MAX) מאפשר להכרזה אחת להחליף ערימה שלמה של שאילתות מדיה: הערך נשאר ב-MIN מתחת לאזור התצוגה הקטן ביותר, ב-MAX מעל לגדול ביותר, ומתרחב בצורה חלקה ביניהם. החלק הקשה הוא המונח PREFERRED - ביטוי יחסי כמו 0.833rem + 0.833vw - שאף אחד לא רוצה לגזור ביד. מחשבון זה מחשב אותו באופן אמיתי מארבעה מספרים: גודל מינימלי, גודל מקסימלי ורוחב יציאת התצוגה שבו כל אחד מהם חל.

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

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

עבור למצב קנה מידה סוג עבור מערכת טיפוגרפיה נוזלית מלאה בשלב אחד: הזן גודל בסיס ויחס מודולרי (1.125 עד 1.5) וקבל שישה גדלים - קטן, בסיס, h4, h3, h2 ו-h1 - כל אחד מחושב כקו clamp() משלו בין התקדמות ניידת עדינה יותר ליחס מאפייני שולחן העבודה המלא, מוכן להעתקה כבלוק של CSS.