מחולל מרווח נוזלים () מהדק
חישוב ערך CSS Clamp() נוזלי אמיתי מגודל מינימלי ומקסימלי על פני שני רוחבי יציאת תצוגה, כאשר השיפוע והצומת מוצגים שלב אחר שלב ותצוגה מקדימה של שינוי גודל חי.
תוצאה
CSS clamp() עובד בדיוק באותו אופן עבור מרווח כפי שהוא פועל עבור גודל גופן - המאפיין פשוט הוא שוליים, ריפוד או פער במקום גודל גופן. דף זה פותח את המחשבון עם טווח של 8 פיקסלים עד 32 פיקסלים על פני נקודת מבט של 320 פיקסלים עד 1280 פיקסלים, שלב נפוץ עבור ריפוד מקטעים או פערי כרטיסים שאמורים להרגיש הדוקים בטלפון ומרווחים על שולחן העבודה ללא שאילתת מדיה באופק.
למתמטיקה הבסיסית לא אכפת מה המספרים מייצגים: אותה נוסחת שיפוע וציר y-חתך שמייצרת גודל כותרת נוזלית מייצרת ערך ריווח נוזלי, כך שהפירוט שלהלן מראה בדיוק כיצד 8px ו-32px הופכים לקו clamp() מוכן להעתקה עבור ריפוד: clamp(...).
גרור את המחוון של רוחב יציאת התצוגה כדי להציג תצוגה מקדימה של איך המרווח ירגיש בכל רוחב בין שתי נקודות השבירה, התאם את ערכי המינימום והמקסימום לטווח מצומצם יותר או רופף יותר, והעתק את הקו המוגמר ישר לכל מאפיין מרווח שצריך אותו.