أداة التصميم المتجاوب

ما هو التصميم المتجاوب؟

متى تستخدمها؟

أدوات التجاوب

مثال عملي

شبكة تتحوّل من ثلاثة أعمدة إلى عمود واحد على الجوال:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 أعمدة افتراضيًا */
  gap: 16px;
}
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr; /* عمود واحد على الجوال */
  }
}

القاعدة داخل @media تُطبَّق فقط حين يقلّ العرض عن 768px. فوق ذلك تبقى ثلاثة أعمدة، وتحته عمود واحد. غيّر الرقم لتحرّك نقطة التحوّل.

أخطاء شائعة

• 1. تصميم للحاسب أولًا ثم «إصلاحه» للجوال: نهج «الجوال أولًا» (min-width) أنظف — تبدأ بالبسيط وتضيف للأكبر.
• 2. نقاط توقّف كثيرة وعشوائية: لا تضع media query لكل جهاز. ضعها حيث «يتكسّر» التصميم فعلًا عند تصغير الشاشة.
• 3. نسيان وسم viewport في HTML: بدون <meta name="viewport"> لا يعمل التجاوب على الجوال إطلاقًا مهما كتبت من CSS.

أسئلة شائعة