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

40:00 دقيقة مجاني
Responsive Design — موقع واحد لكل الشاشات

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

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

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

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

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

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

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

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

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

التصميم بأسلوب Mobile-First

عند بناء أي موقع حديث، من الأفضل أن نبدأ التفكير من أصغر شاشة أولًا، ثم ننتقل بعد ذلك إلى الشاشات الأكبر. هذه الفكرة تُعرف باسم Mobile-First، وهي من أهم الأساليب المستخدمة في تصميم المواقع المتجاوبة.

ما معنى Mobile-First؟

مصطلح Mobile-First يعني أن المصمم أو المطور يبدأ ببناء شكل الموقع وتجربة المستخدم للجوال أولًا، ثم يضيف تحسينات وتعديلات تناسب الشاشات الأكبر مثل التابلت واللابتوب وأجهزة الكمبيوتر المكتبية.

الفكرة هنا أن شاشة الجوال هي الأصغر والأكثر حساسية في ترتيب العناصر، لذلك عندما تنجح في تنظيم التصميم عليها، يصبح تطويره للشاشات الأكبر أسهل بكثير.

لماذا نبدأ بالجوال أولًا؟

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

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

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

كيف يعمل هذا الأسلوب؟

في أسلوب Mobile-First نقوم أولًا بكتابة التنسيقات الأساسية التي ستظهر على الجوال. بعد ذلك نستخدم Media Queries

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

مثال بسيط باستخدام CSS

في المثال التالي، نبدأ بتنسيق العنصر للجوال أولًا، ثم نضيف تعديلًا عندما تصبح الشاشة أكبر: 

.box {
  background-color: lightblue;
  padding: 10px;
  font-size: 14px;
}

@media (min-width: 768px) {
  .box {
    background-color: lightgreen;
    padding: 20px;
    font-size: 18px;
  }
}

في هذا المثال:

  • التنسيق الأول يُطبَّق على الجوال بشكل افتراضي.
  • عندما يصبح عرض الشاشة 768px أو أكبر، تتغير بعض الخصائص مثل لون الخلفية والحجم والمسافات.

ماذا يحدث إذا لم نستخدم Mobile-First؟

إذا بدأنا التصميم للكمبيوتر أولًا، ثم حاولنا بعد ذلك تصغيره ليلائم الجوال، فغالبًا سنواجه مشاكل كثيرة، مثل تكدس العناصر، أو صغر الخطوط، أو خروج بعض الأجزاء خارج الشاشة.

كما قد تصبح تجربة المستخدم على الجوال غير مريحة، خاصة إذا احتاج الزائر إلى التكبير والتصغير أو السحب أفقيًا لرؤية المحتوى. وهذا يؤثر سلبًا على جودة الموقع ورضا المستخدمين.

فوائد التصميم بأسلوب Mobile-First

  • يجعل الموقع مناسبًا للهواتف من البداية.
  • يساعد على تنظيم المحتوى بشكل واضح وبسيط.
  • يحسن تجربة المستخدم على الشاشات الصغيرة.
  • يسهّل تطوير التصميم للشاشات الأكبر لاحقًا.
  • يقلل الفوضى ويجبرك على التركيز على الأهم.
  • مناسب جدًا للمواقع الحديثة والمتجاوبة.

شرح Media Queries في CSS

تعتبر Media Queries من أهم الأدوات في تصميم المواقع الحديثة، لأنها تسمح لك بتغيير شكل الموقع حسب حجم الشاشة أو نوع الجهاز.

ما هي Media Queries؟

Media Queries هي تقنية في CSS تُستخدم لتطبيق أنماط مختلفة حسب حجم الشاشة، مثل الجوال 📱 أو التابلت 💻 أو الكمبيوتر 🖥.

بمعنى بسيط: تخبر المتصفح → "إذا كان عرض الشاشة بهذا الحجم، غيّر التصميم بهذا الشكل".

لماذا نستخدم Media Queries؟

  • لجعل الموقع متجاوبًا مع جميع الأجهزة.
  • لتغيير حجم الخطوط والصور حسب الشاشة.
  • لتنظيم العناصر (عمودي ↔ أفقي).
  • لتحسين تجربة المستخدم.

الشكل الأساسي لـ Media Query

@media (min-width: 768px) {
  /* هنا نكتب التنسيقات */
}

هذا الكود يعني: إذا كان عرض الشاشة 768px أو أكبر، طبق التنسيقات الموجودة داخل القوس.

مثال عملي

.box {
  background: blue;
  font-size: 14px;
}

@media (min-width: 768px) {
  .box {
    background: green;
    font-size: 18px;
  }
}
  • في الجوال → العنصر لونه أزرق وخطه صغير.
  • في الشاشات الأكبر → يتغير اللون إلى أخضر ويكبر الخط.

أنواع Media Queries

  • min-width → يبدأ من هذا الحجم وأكبر (Mobile-First)
  • max-width → يعمل حتى هذا الحجم (Desktop-First)

الفرق بين min-width و max-width

/* Mobile-First */
@media (min-width: 768px) {
  /* للأجهزة الأكبر */
}

/* Desktop-First */
@media (max-width: 768px) {
  /* للأجهزة الأصغر */
}

ماذا يحدث إذا لم نستخدم Media Queries؟

إذا لم تستخدم Media Queries، سيظهر موقعك بنفس الشكل على جميع الأجهزة، وهذا يسبب مشاكل كثيرة:

  • ❌ النصوص قد تكون صغيرة جدًا على الجوال.
  • ❌ العناصر قد تخرج خارج الشاشة.
  • ❌ التصميم قد يبدو مزدحم وغير منظم.
  • ❌ تجربة المستخدم ستكون سيئة.

Media Queries في Tailwind

في Tailwind لا تحتاج لكتابة Media Queries بنفسك، بل تستخدم اختصارات جاهزة مثل: 

<div class="text-sm md:text-lg lg:text-xl">
  نص
</div>
  • text-sm → للجوال
  • md:text-lg → للشاشات المتوسطة
  • lg:text-xl → للشاشات الكبيرة

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

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 وشاهد التصميم يتغير ( أداة تعليمية)

الإعدادات

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

/* Mobile-First */

المعاينة

MY STORE
منتج 1
منتج 2
منتج 3
منتج 4
منتج 5
منتج 6

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

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

الإعدادات

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; }
}

تمرين

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

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

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

الخلاصة

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

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

أسلوب Mobile-First ليس مجرد طريقة كتابة CSS، بل هو طريقة تفكير حديثة في تصميم المواقع. أنت تبدأ من الشاشة الأصغر، وتركز على أهم العناصر، ثم تضيف التحسينات مع كبر الشاشة.

وعندما تتقن هذا الأسلوب، ستصبح قادرًا على بناء مواقع أكثر احترافية، وأكثر راحة للمستخدم، وأكثر توافقًا مع مختلف الأجهزة.

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

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

الدرس التالي العودة للسابق