الإعلام الآلي — CSS المتقدم: التصميم المتجاوب Responsive Design و Flexbox و Grid — الثالثة ثانوي — بكالوريا — المنهاج الجزائري

CSS المتقدم: التصميم المتجاوب (Responsive Design) و Flexbox و Grid

CSS (Cascading Style Sheets) هي لغة تنسيق صفحات الويب. المستوى المتقدم يشمل تقنيات التصميم المتجاوب التي تجعل الموقع يظهر بشكل جيد على جميع الأجهزة (حاسوب، لوحي، هاتف).

1. مفهوم Responsive Design

التصميم المتجاوب هو أسلوب في تصميم المواقع يجعلها تتكيف تلقائياً مع حجم شاشة الجهاز المستخدم. يعتمد على:
• الشبكات المرنة (Flexible Grids).
• الصور المرنة (Flexible Images).
• استعلامات الوسائط (Media Queries).

2. Media Queries

تسمح بتطبيق أنماط CSS مختلفة حسب حجم الشاشة:
@media (max-width: 768px) {
  body { font-size: 14px; }
  .container { flex-direction: column; }
}
نقاط القطع (breakpoints) الشائعة: 480px (هواتف)، 768px (ألواح)، 1024px (حواسيب محمولة)، 1200px (شاشات كبيرة).

3. Flexbox

Flexbox هو نموذج تخطيط أحادي البعد يسمح بتوزيع العناصر داخل حاوية بمرونة:
• display: flex — تعريف حاوية Flex.
• flex-direction — اتجاه العناصر (row/column).
• justify-content — محاذاة أفقية.
• align-items — محاذاة عمودية.
• flex-wrap — السماح بالتفاف العناصر.

4. CSS Grid

Grid هو نموذج تخطيط ثنائي البعد (أعمدة وصفوف):
• display: grid — تعريف حاوية Grid.
• grid-template-columns — تعريف الأعمدة.
• grid-template-rows — تعريف الصفوف.
• gap — المسافة بين الخلايا.
• grid-column / grid-row — تحديد موقع العنصر.

5. تمارين مقترحة

التمرين 1: أنشئ صفحة HTML تحتوي على 3 أعمدة باستخدام Flexbox.
التمرين 2: استخدم Media Queries لجعل الموقع متجاوباً مع الهواتف.
التمرين 3: صمم شبكة (Grid) من 4×4 خلايا بأحجام مختلفة.

للمزيد من المعلومات حول هذا الموضوع، يمكنكم الاطلاع على دروس مشابهة: الحلقات في بايثون و البكتيريا والفطريات.