CSS: أساسيات CSS المتجاوب

التصميم المتجاوب يجعل صفحات الويب تبدو جيدة على جميع الأجهزة — من الهواتف المحمولة إلى أسطح المكتب.

1. علامة viewport meta

علامة ضرورية للتصميم المتجاوب:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

without هذه العلامة، تُعرض صفحات المتصفحات المحمولة بعرض سطح المكتب (عادة 980px) ثم تتقلص لتناسب — النص يصبح غير مقروء.

2. استعلامات الوسائط

تطبيق أنماط مختلفة على أحجام شاشات مختلفة:

▶ مثال

<style>
.box {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}

/* محمول: عمود واحد */
@media (max-width: 576px) {
  .box { background: #e74c3c; }
}

/* جهاز لوحي: عمودان */
@media (min-width: 577px) and (max-width: 992px) {
  .box { background: #f39c12; }
}

/* سطح مكتب: ثلاثة أعمدة */
@media (min-width: 993px) {
  .box { background: #2ecc71; }
}
</style>
<div class="box">صندوق متجاوب — حجم المتصفح لرؤية تغيير اللون</div>

3. الوحدات النسبية

▶ مثال

<style>
.rem-demo {
  font-size: 1.2rem;  /* نسبي للجذر */
}
.vw-demo {
  width: 80vw;        /* 80% من عرض منفذ العرض */
}
</style>
<div class="rem-demo">نص يستخدم وحدات rem</div>
<div class="vw-demo">80% من عرض منفذ العرض</div>

4. نهج المحمول أولاً

صمم للمحمول أولاً، ثم حسّن لشاشات أكبر:

/* أنماط أساسية (محمول) */
.container {
  width: 100%;
  padding: 10px;
}

/* جهاز لوحي */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* سطح مكتب */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

5. صور مرنة

اجعل الصور متجاوبة:

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

❓ أسئلة شائعة

📖 ملخص

• جوهر التصميم المتجاوب هو "التكيف المرن" — استخدم وحدات نسبية واستعلامات وسائط وصور مرنة
• تذكر ثلاث خطوات: أضف viewport meta، استخدم وحدات نسبية، طبّق استعلامات وسائط عند نقاط التوقف
• المحمول أولاً مُوصى به — صمم لأصغر الشاشات أولاً، ثم حسّن

📝 تمارين

1. أنشئ صفحة: ثلاثة أعمدة على سطح المكتب، اثنان على جهاز لوحي، واحد على محمول (باستخدام استعلامات الوسائط).
2. اضبط أحجام الخطوط بـ rem، ثم عدّل font-size الجذري في استعلام الوسائط لرؤية مقياس متناسب.
3. أنشئ شريط تنقل متجاوب: أفقي على سطح المكتب، مخفي (أو همبرغر) على محمول.
4. اضبط max-width: 100% على الصور، حجم المتصفح لرؤية سلوك متجاوب.

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

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

من نحن