התאמה גמישה לעומס

סקירה כללית

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

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

הטמעה

1. הגדרת קונטיינר

כדי להשתמש ביחידות של שאילתות מאגר, קודם צריך להגדיר הקשר של הכלה ברכיב הורה.

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

2. שימוש ביחידות של שאילתות מאגר

כדי להגדיר גדלים ביחס למאגר, השתמשו ביחידות של שאילתות מאגר (cqi, cqb וכו').

• ‫cqi: ‏1% מהגודל של השורה במאגר (רוחב במצבי כתיבה אופקיים).
• ‫cqb: ‏1% מגודל הבלוק של מאגר התגים (גובה במצבי כתיבה אופקיים).

הערה: אפשר להשתמש ביחידות קונטיינר ישירות בכל נכס בלי צורך בכלל שאילתה של @container. הם נפתרים באופן אוטומטי על סמך האב הקדמון הקרוב ביותר עם container-type מוגדר.

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

3. הגבלת ערכים באמצעות clamp()

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

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

אסטרטגיות חלופיות

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

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

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