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

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

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

خصائص هذا القسم: font-size

1. علامة viewport meta

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

HTML

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

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

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

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

▶ مثال

▶ جرّب الكود

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

الوحدة	المرجع	الأفضل لـ
`%`	عنصر الأصل	عروض الحاويات
`em`	حجم خط الأصل	حشو، هوامش
`rem`	حجم الخط الجذري	أحجام الخطوط
`vw`	عرض منفذ العرض	عناصر بعرض كامل
`vh`	ارتفاع منفذ العرض	أقسام بشاشة كاملة

▶ مثال

▶ جرّب الكود

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

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

CSS

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

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

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

5. صور مرنة

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

CSS

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

خصائص هذا القسم: font-size

❓ أسئلة شائعة

س ماذا يحدث without علامة viewport meta؟

ج المتصفحات المحمولة تعرض بعرض سطح المكتب (عادة 980px)، ثم تتقلص لتناسب شاشة الهاتف. النص يصبح غير مقروء، مما يتطلب تقريب بالإصبع. علامة viewport meta هي أساس التصميم المتجاوب.

س كيف أختار نقاط توقف استعلام الوسائط؟

ج اكتب أنماط المحمول أولاً (محمول أولاً)، ثم حسّن بـ min-width. نقاط توقف شائعة: محمول < 576px، جهاز لوحي 768px، حاسوب محمول 992px، سطح مكتب 1200px. لا تقيد بهذه الأرقام — اختر نقاط توقف بناءً على محتواك الفعلي.

س هل يجب أن يستخدم التصميم المتجاوب rem؟

ج ليس بالضرورة. rem تناسب أحجام الخطوط؛ أبعاد التخطيط تستخدم %، fr، vw/vh. المفتاح هو عدم استخدام px ثابت لأحجام التخطيط. أحجام الخطوط: rem؛ الحاويات: %؛ المسافات: em أو rem.

📖 ملخص

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

📝 تمارين

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

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

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

من نحن