التصميم المتجاوب + Media Queries + Mobile-First - تطوير الويب

في عالم اليوم لم يعد تصفح الإنترنت يقتصر على أجهزة الكمبيوتر المكتبية فقط، بل أصبح يتم عبر الهواتف الذكية، الأجهزة اللوحية، الشاشات الكبيرة، وحتى الساعات الذكية. هذا التنوع الكبير في أحجام الشاشات ودقات العرض فرض على مطوري الويب تحديًا مهمًا: كيف نجعل الموقع يبدو منظمًا وجذابًا ويعمل بكفاءة على جميع الأجهزة؟

من هنا ظهر مفهوم التصميم المتجاوب (Responsive Web Design)، وهو أسلوب تصميم يهدف إلى جعل صفحات الويب تتكيف تلقائيًا مع حجم الشاشة التي تُعرض عليها، بحيث تتغير طريقة عرض العناصر، وأحجام الخطوط، وترتيب الأقسام بما يناسب الجهاز المستخدم دون الحاجة لإنشاء نسخة منفصلة لكل جهاز.

أولًا: ما هو التصميم المتجاوب؟

التصميم المتجاوب هو منهجية لبناء صفحات الويب تجعل الموقع يتكيف تلقائيًا مع جميع أحجام الشاشات (كمبيوتر، تابلت، جوال...) دون الحاجة لنسخ منفصلة.

• استخدام وحدات قياس مرنة مثل: %، vw/vh، rem، em بدلاً من القيم الثابتة (px) في أغلب الحالات
• الاعتماد على تخطيطات مرنة مثل: Flexbox و CSS Grid
• جعل الصور مرنة (Fluid Images): max-width: 100%; height: auto;
• استخدام Media Queries لتغيير التصميم حسب حجم الشاشة
• الفكرة الأساسية: الموقع ليس ثابت العرض، بل يتكيف ديناميكيًا مع الجهاز

مثال عملي بسيط:

→ على شاشة الكمبيوتر: العناصر تظهر بجانب بعضها (مثلاً 3–4 أعمدة)

→ على الجوال: العناصر تنتقل تلقائيًا لتصبح تحت بعضها (عمود واحد)

→ كل هذا يحدث تلقائيًا بدون أي تدخل من المستخدم

الثلاثي الذي لا غنى عنه في أي تصميم متجاوب احترافي.

1

<meta name="viewport" ...>

بدونها الموبايل يظهر الموقع مُصغّرًا جدًا

2

وحدات مرنة
rem · em · % · vw · vh

تخلي التصميم يتأقلم بدل ما "ينكسر"

3

@media queries

نقول للمتصفح: إذا صار العرض أقل/أكبر من قيمة → غيّر التصميم

أولا "meta name="viewport


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

ما وظيفته؟
هذا الوسم يخبر المتصفح على الهاتف (والأجهزة المحمولة عموماً):

"اعرض الموقع بعرض الجهاز الحقيقي بالضبط، ولا تقم بتصغيره كأنه موقع مصمم لشاشة كمبيوتر كبيرة."

الكود المطلوب (ضعه داخل <head>):

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

ماذا يحدث بدون هذا الوسم؟

• المتصفح يفترض أن الموقع مصمم لشاشات الكمبيوتر (عادةً عرض افتراضي 980px تقريباً)
• فيقوم بـتصغير الصفحة كلها حتى تظهر كاملة داخل شاشة الجوال الصغيرة
• النتيجة: نصوص صغيرة جدًا • أزرار صغيرة • صور مضغوطة • تجربة مستخدم سيئة جداً

الفرق باختصار:

مع الـ viewport:← الموقع يأخذ عرض الشاشة الحقيقي ← يظهر بحجمه الطبيعي ← جاهز للتصميم المتجاوب

بدون الـ viewport:← الموقع يُصغّر كله ← النصوص تبدو بحجم النمل ← المستخدم مضطر يقرب (zoom in) يدوياً في كل مكان

← هذا الوسم هو أول خطوة أساسية لأي موقع متجاوب (responsive) حديث

ثانيًا: الوحدات المرنة

المشكلة مع px أنها ثابتة.
لو قلت:

;width: 400px

فهي 400 px مهما كان حجم الشاشة.
وفي الجوال قد "تنكسر" وتخرج خارج الشاشة. لأن نفترض عرض شاشة الجوال 350 بكسل px وانت وضعت صورة وقلت عرضها 400 بكسل فهي مناسبة لشاشة الكمبيوتر لان شاشة الكمبيوتر اعرض من 350بكسل بينما غير مناسبة لشاشة الجوال.
هنا تأتي أهمية الوحدات المرنة

1. % (النسبة المئوية)

;width: 100%

تعني:
خذ كل عرض الحاوية.مثلا وضعت صورة داخل موقعك والصورة وضعتها داخل وسم body وقلت ان عرضها 100% فهي تاخذ عرض الشاشة كاملة سواء شاشة كمبيوتر أو شاشة جوال أي يتغير عرضها بناء على عرض الشاشة.

2. rem

تعتمد على حجم الخط الأساسي للصفحة (html).

;font-size: 1.2rem

إذا كان:

html { font-size: 16px; }

فـ 1rem = 16px
الميزة:
كل الموقع يتغير بسهولة إذا غيرت حجم الخط الأساسي.

3. em

تشبه rem لكنها تعتمد على العنصر الأب المباشر.

4. vw و vh

الوحدة 1vw تعني 1% من عرض الشاشة
الوحدة 1vh تعني 1% من ارتفاع الشاشة
مثال يجعل العنصر بطول الشاشة بالكامل.

;height: 100vh

نقاط مهمة

/* Mobile (الافتراضي) */
body { font-size: 16px; }

/* Tablet */
@media (min-width: 640px) { ... }

/* Small Laptop */
@media (min-width: 768px) { ... }

/* Large Laptop */
@media (min-width: 1024px) { ... }

/* Very Large Screens */
@media (min-width: 1280px) { ... }

تذكّر: min-width يعني “من هذا العرض وفوق”.

اختر breakpoint وشاهد التصميم يتغير ( أداة تعليمية)

هذا قسم: الإعدادات

Breakpoint

تخطيط المنتجات

gap (px)

Padding (px)

تفعيل hover للكروت (شاشات كبيرة) card:hover transform

هذا قسم: CSS الناتج

/* Mobile-First */

هذا قسم: المعاينة

MY STORE

منتج 1

منتج 2

منتج 3

منتج 4

منتج 5

منتج 6

التغيير هنا محاكاة للتصميم عند breakpoint — (Mobile First + @media)

Units Playground

جرّب rem و % و vw وشوف كيف تختلف على الشاشات

هذا قسم: الإعدادات

الوحدة

القيمة

حجم الخط الأساسي (للـ rem)

هذا قسم: CSS الناتج

:root { font-size: 16px; }

هذا قسم: المعاينة

عنوان تجريبي

هذا نص لتجربة الوحدات المرنة. جرّب تغيير الوحدة والقيمة وشاهد الفرق.

rem يتأثر بحجم الخط الأساسي، بينما vw يتأثر بعرض الشاشة

مثال (Mobile First + Media Queries)

/* Mobile-First */
.products { display: grid; grid-template-columns: 1fr; gap: 16px; }
nav ul { display: flex; flex-direction: column; gap: 12px; }

/* Tablet */
@media (min-width: 640px) {
  .products { grid-template-columns: repeat(2, 1fr); }
  nav ul { flex-direction: row; gap: 20px; }
}

/* Laptop */
@media (min-width: 768px) {
  .products { grid-template-columns: repeat(3, 1fr); }
}

/* Large */
@media (min-width: 1024px) {
  .products { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

تمرين

افتح مشروعك السابق (المتجر أو الصفحة الشخصية) وطبّق التالي:

تأكد من وجود viewport meta tag.
استخدم rem و % و fr بدل px قدر الإمكان.
حوّل Grid إلى repeat(auto-fit, minmax(280px, 1fr)).
أضف 3 media queries على الأقل: 768px و 1024px و 1280px.
جرّب تغيير حجم النافذة وشاهد السحر.

مبروك! موقعك الآن متجاوب 💙

الخلاصة

viewport + وحدات مرنة + @media

إذا طبّقت الثلاثة = موقع احترافي على كل الأجهزة

الدرس القادم: Transitions & Animations

نخلي الأزرار تتحرك، الصور تكبر، والقوائم تنزلق… كأن الموقع حي!