تغيير الحجم المرن

نظرة عامة

يتيح القياس المرن للمكوّنات ضبط نِسَبها الداخلية (مثل أحجام الخطوط والتباعد) استنادًا إلى أبعادها الحالية. يؤدي ذلك إلى إنشاء تصميم أكثر تماسكًا من التنقل بين نقاط التوقف الثابتة.

في السابق، كان يتم تحقيق التغيير المرن للحجم باستخدام وحدات إطار العرض (تغيير الحجم استنادًا إلى حجم الشاشة)، ولكن وحدات طلبات البحث عن الحاويات الحديثة تتيح تغيير حجم المكوّنات بالنسبة إلى الحاوية الرئيسية بدلاً من ذلك. يضمن ذلك ظهور المكوّنات بشكل جيد بغض النظر عن مكان وضعها في التنسيق، ما يعزّز عزل المكوّنات وإمكانية إعادة استخدامها بشكل أفضل.

التنفيذ

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()

لمنع أن تصبح الأحجام صغيرة جدًا أو كبيرة جدًا، استخدِم دالة CSS clamp(). يؤثر ذلك في قدرة المستخدم على تكبير حجم الخط الأساسي أو تصغيره أو تعديله. لضمان استيفاء النص لإرشادات تسهيل الاستخدام، يجب ألا يزيد الحد الأقصى للحجم عن 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);
  }
}

يضمن هذا الإجراء الاحتياطي استمرار تغيير حجم النص، ولكنّه سيعتمد على عرض الشاشة بدلاً من عرض المكوّن. يجب اختبار ذلك للتأكّد من أنّه يعمل في حالة الاستخدام الخاصة بك.