بطاقة تثبيت

في هذا العرض التوضيحي، يتم ضبط العرض باستخدام 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%;
  }