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

استخدم التصميم المتجاوب في كل موقع تبنيه دون استثناء، وتحديدًا عندما:

• تريد أن يعمل تخطيطك على الجوال وسطح المكتب معًا
• تحتاج إخفاء أو إظهار عناصر حسب حجم الشاشة
• تغيّر عدد الأعمدة أو حجم الخط بين الأجهزة

أنصح دائمًا بالبدء بتصميم الجوال أولًا (Mobile-First) ثم التوسّع للشاشات الأكبر.

مثال: تحويل عمودين إلى عمود واحد على الشاشات الصغيرة.

.grid { grid-template-columns: 1fr 1fr; }

@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
}

غيّر عرض المعاينة في الأداة بالأعلى لتعبر حدّ 768 بكسل وترى التغيّر مباشرة.