CSS: تخطيط CSS المتجاوب

آخر تحديث: 2026-10-13

خصائص هذا القسم: min-width

1. صور متجاوبة

(1) صورة متجاوبة أساسية

img {
  max-width: 100%;
  height: auto;
}

(2) صورة خلفية متجاوبة

.banner {
  background-image: url("desktop-bg.jpg");
  background-size: cover;
  background-position: center;
}

@media (max-width: 768px) {
  .banner {
    background-image: url("mobile-bg.jpg");
  }
}

2. جداول متجاوبة

الجداول يمكن أن تفيض على الشاشات الصغيرة. استخدم overflow-x: auto للتمرير الأفقي:

▶ مثال

3. إظهار/إخفاء العناصر

استخدم استعلامات الوسائط لإظهار/إخفاء العناصر عند نقاط توقف مختلفة:

▶ مثال

4. اختبار التخطيطات المتجاوبة

1. تغيير حجم المتصفح: اسحب حواف نافذة المتصفح
2. Chrome DevTools: F12 → تبديل شريط الأجهزة (Ctrl+Shift+M)
3. أجهزة حقيقية: اختبر على هواتف/أجهزة لوحية حقيقية عند الإمكان

خصائص هذا القسم: min-width

❓ أسئلة شائعة

📖 ملخص

• جوهر التخطيط المتجاوب هو "التكيف المرن"
• من خلال شبكات مرنة (% / fr)، وصور مرنة (max-width)، واستعلامات وسائط (@media)، يمكنك بناء صفحات تعمل بشكل جيد على جميع الشاشات
• في الممارسة، "المحمول أولاً" مُوصى به: اكتب أنماط المحمول أولاً، ثم استخدم min-width لإضافة أنماط بشكل تدريجي للجهاز اللوحي وسطح المكتب

📝 تمارين

1. أنشئ صفحة "مدونة شخصية متجاوبة" بتنقل ترويسي، وقائمة مقالات، وتوصيات شريط جانبي، وحقوق نشر تذييل. المتطلبات: محمول عمود واحد، جهاز لوحي عمودان، سطح مكتب ثلاثة أعمدة + شريط جانبي ثابت.
2. استخدم نقاط توقف min-width لتغيير شبكة بطاقات من عمود واحد إلى 4 أعمدة، مراقبة عند كل نقطة توقف.
3. أنشئ صفحة جدول متجاوبة حيث يمكن للجداول التمرير أفقياً على شاشات صغيرة (باستخدام overflow-x: auto).

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن