CSS — Responsive Design

مقدمة

التصميم المتجاوب يكيّف الواجهة مع أحجام الشاشات المختلفة.

ماذا ستتعلم؟

• عرض مرن
• Media Queries
• صور متجاوبة
• Mobile-first

الصياغة

@media (max-width: 768px){ ... }

مثال

.container{ max-width:1200px; margin:0 auto; padding:16px; }
.grid{ display:grid; gap:12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px){
  .grid{ grid-template-columns: 1fr; }
}

ملاحظات

• ابدأ mobile-first.
• استخدم وحدات مرنة مثل % و rem.

  جرّب بنفسك: افتح Playground: /ar/playground/html