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

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 للتمرير الأفقي:

▶ مثال

<style>
.table-wrapper {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
</style>
<div class="table-wrapper">
  <table>
    <tr><th>الاسم</th><th>البريد الإلكتروني</th><th>الهاتف</th><th>العنوان</th><th>المدينة</th></tr>
    <tr><td>أحمد</td><td>ahmed@email.com</td><td>123-456-7890</td><td>شارع الملك، 123</td><td>الرياض</td></tr>
  </table>
</div>

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

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

▶ مثال

<style>
.desktop-only {
  display: none;
}
.mobile-only {
  display: block;
}

@media (min-width: 768px) {
  .desktop-only {
    display: block;
  }
  .mobile-only {
    display: none;
  }
}
</style>
<div class="mobile-only">محتوى المحمول فقط</div>
<div class="desktop-only">محتوى سطح المكتب فقط</div>

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

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

❓ أسئلة شائعة

📖 ملخص

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

📝 تمارين

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

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

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

من نحن