כרטיס הצמדה

בהדגמה הזו בחרת להגדיר את הרוחב באמצעות הפקודה clamp(), כך: width: clamp(<min>, <actual>, <max>).

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

.parent {
  width: clamp(23ch, 60%, 46ch);
}

הגודל המינימלי כאן הוא 23ch או 23 יחידות, והגודל המקסימלי הוא 46ch, 46 תווים. יחידות רוחב תווים מבוססות על גודל הגופן של הרכיב (באופן ספציפי, על רוחב הגליף 0). הגודל 'בפועל' הוא 50%, שמייצג 50% מרוחב ההורה של הרכיב הזה.

הפעולה של הפונקציה clamp() כאן מאפשרת לרכיב הזה לשמור על רוחב של 50% עד ש-50% יהיה גדול מ-46ch (באזורי תצוגה רחבים יותר), או קטן מ-23ch (באזורי תצוגה קטנים יותר). בסרטון אפשר לראות איך הרוחב של הכרטיס הזה גדל עד לנקודה המקסימלית הצמודה שלו ויקטן למינימום הצמוד כשההורה מתמתח ומתכווץ. לאחר מכן היא נשארת במרכז ההורה באמצעות נכסים נוספים כדי למרכז אותה. כך ניתן לאפשר פריסות קריאות יותר, כי הטקסט לא יהיה רחב מדי (מעל 46ch) או מכווץ וצר מדי (פחות מ-23ch).

אפשר להשתמש בשיטה הזו כדי להטמיע טיפוגרפיה רספונסיבית. לדוגמה: font-size: clamp(1.5rem, 20vw, 3rem) במקרה כזה, גודל הגופן של הכותרת תמיד יישאר מוגבל בין 1.5rem ל-3rem, אבל הוא יגדל ויכווץ בהתאם לערך בפועל של 20vw כך שיתאים לרוחב של אזור התצוגה.

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

HTML

<div class="parent">
  <div class="card">
    <h1>Title Here</h1>
    <div class="visual"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }