وحدات استعلام الحاوية: cqw وcqh
حدّد أحجام العناصر نسبةً إلى حاوية الاستعلام باستخدام cqw وcqh ووحدات الحاويات ذات الصلة.
وحدات استعلام الحاوية: cqw وcqh درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
وحدات استعلامات الحاوية
يوفّر CSS وحدات مرتبطة بالحاوية تحدد أحجام القيم كنسب مئوية من أبعاد حاوية الاستعلام، على نحو مشابه لوحدات نافذة العرض (vw/vh)، لكن بالاعتماد على حاوية المكوّن.
cqw — عرض استعلام الحاوية
1cqw = 1% من الحجم المضمّن للحاوية (العرض عند استخدام الكتابة الأفقية). يمكنك ضبط حجم الطباعة والمسافات بما يتناسب مع حاوية المكوّن.
<div class="card-wrapper"><h3 class="card-title">Fluid Card Title</h3></div>
cqh — ارتفاع استعلام الحاوية
1cqh = 1% من الحجم الكتلي للحاوية (الارتفاع). يتطلب ذلك container-type: size، وليس inline-size فقط.
<div class="hero-wrapper"><div class="hero-card">Hero Text</div></div>
cqi — الحجم المضمّن للحاوية
cqi اسم مستعار لـ cqw عند استخدام الكتابة الأفقية، ويشير تحديدًا إلى البعد المضمّن، وليس إلى البعد الأفقي.
cqb — الحجم الكتلي للحاوية
تشبه cqb cqh، لكنها مرتبطة بالبعد؛ إذ تشير إلى الحجم الكتلي بصرف النظر عن وضع الكتابة.
cqmin و cqmax
cqmin = 1% من بُعد الحاوية الأصغر. cqmax = 1% من البعد الأكبر. وهما مماثلان لـ vmin/vmax.
<div class="icon-wrapper"><div class="icon"></div></div>
الطباعة المرنة في المكوّنات
تتيح وحدات الحاوية إنشاء طباعة مرنة مرتبطة بالمكوّن فعليًا:
<div class="card-wrapper"><h3 class="card-title">Fluid Title</h3></div>
متى تستخدم وحدات الحاوية
استخدم وحدات الحاوية عندما:
- ينبغي أن يتدرج نص المكوّن مع عرض المكوّن
- ينبغي أن تتناسب المسافات داخل المكوّن مع حجمه
- تريد تصميمًا مرنًا على مستوى المكوّن ومستقلًا عن نافذة العرض
وحدات الحاوية مقابل وحدات نافذة العرض
الفرق الأساسي هو أن وحدات نافذة العرض (vw, vh) تشير إلى نافذة عرض المتصفح، بينما تشير وحدات الحاوية (cqw, cqh) إلى أقرب حاوية استعلام. يجعل ذلك المكوّنات قابلة للنقل فعليًا، إذ سيبدو المكوّن نفسه صحيحًا من حيث التناسب في شريط جانبي بعرض 300px وفي مساحة رئيسية بعرض 900px.
مطلوب: container-type
لا تعمل وحدات الحاوية إلا عند وجود سلف من نوع container-type. ومن دونه، تعود وحدة استعلام الحاوية إلى وحدة نافذة العرض الصغيرة (svw/svh).
نمط عملي
مكوّن كامل يستخدم وحدات الحاوية:
<div class="feature">
<h2 class="feature-title">Feature Name</h2>
<p class="feature-text">A short description of this feature that scales with the container.</p>
</div>
تحقق سريع
ما الناتج الذي ينشئه font-size: 5cqw في مكوّن داخل حاوية عرضها 400px؟
خلاصة
تحدد وحدات استعلام الحاوية (cqw وcqh وcqi وcqb وcqmin وcqmax) أحجام القيم نسبةً إلى حاوية الاستعلام بدلًا من نافذة العرض. استخدم cqw للطباعة المرنة التي تتدرج مع عرض المكوّن. وتتطلب هذه الوحدات سلفًا من نوع container-type للعمل، وإلا عادت إلى وحدات نافذة العرض.
الأسئلة الشائعة
هل درس «وحدات استعلام الحاوية: cqw وcqh» مجاني؟
نعم — نص درس «وحدات استعلام الحاوية: cqw وcqh» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «وحدات استعلام الحاوية: cqw وcqh»؟
حدّد أحجام العناصر نسبةً إلى حاوية الاستعلام باستخدام cqw وcqh ووحدات الحاويات ذات الصلة. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «وحدات استعلام الحاوية: cqw وcqh»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- container-type وcontainer-name
- قواعد @container ونقاط التوقف
- وحدات استعلام الحاوية: cqw وcqh
- استعلامات الحاويات مقابل استعلامات الوسائط