أساسيات التجاوب: شرح وتمارين وأخطاء شائعة

ماذا يعلّم هذا الدرس فعلًا

اجعل التخطيطات تتكيف بعروض مرنة واستعلامات وسائط بسيطة. هذا الدرس جزء من مسار «أساسيات الويب (Web)».

الشرح المتعمّق

التصميم المتجاوب يكيّف التخطيط مع حجم منفذ العرض. ابدأ بعروض مرنة (٪ وmax-width) وكدّس أعمدة المرن على الشاشات الصغيرة عبر استعلامات الوسائط. اختبر بالتحجيم—لا تصمم على شاشة واسعة فقط. صف .cards يصبح عموداً تحت عرض ٦٠٠ بكسل. اجعل صف بطاقاتك يتكدس على المنافذ الضيقة؛ وتحقق عند ٣٢٠ و١٠٢٤ بكسل. استخدم حلقة علّم←اشرح←بيّن←طبّق في كل مرة تدرس فيها هذه المهارة. تنبّأ بالنتيجة قبل التحقق ثم صحّح الخطوة الفاشلة فقط دون

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

يجعل الخطوة تعمل. راجع الأخطاء فور حدوثها واكتب سبب الخطأ بجملة واضحة واحدة. اقرأ كل خطوة ثم أعد صياغتها بكلماتك قبل التنفيذ.

تطبيق عملي

**مثال** @media (max-width: 600px) { .row { flex-direction: column; } }

أخطاء شائعة

• عروض بكسل ثابتة لكل الحاويات • تخطيط سطح مكتب فقط • استعلامات بلا اختبار عرض ضيق حقيقي