التصميم المتجاوب للمواقع: دليل عملي للمبتدئين لبناء واجهات حديثة

Updated يونيو 8, 2026 8 min read

Aldawsari

دقائق القراءة: 8

ما هو التصميم المتجاوب للمواقع؟

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

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

التصميم المتجاوب للمواقع على شاشات متعددة بأحجام مختلفة

كيف تطور التصميم المتجاوب في الويب الحديث؟

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

مع ارتفاع نسبة مستخدمي الهواتف مقارنة بمستخدمي الحاسوب، تغيّر أسلوب بناء المواقع بالكامل. بدأ المطورون والمصممون في اعتماد مفهوم mobile-first، أي تصميم الواجهة للجوال أولاً، ثم توسيعها لتناسب الشاشات الأكبر لاحقاً.

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

examplewebsite.com للنسخة الأساسية.
m.examplewebsite.com أو examplewebsite.mobi لنسخة الجوال.

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

كيف تجعل موقعك متجاوباً عملياً؟

تطبيق التصميم المتجاوب لا يقتصر على جزء واحد من المشروع، بل يشمل بنية الصفحة، وإعدادات HTML، وأنماط CSS، وأحياناً سلوكيات JavaScript. فيما يلي أهم الخطوات الأساسية.

1) ضبط نافذة العرض داخل وسم الرأس

أول خطوة لا غنى عنها هي إضافة وسم viewport داخل قسم <head>. هذا الوسم يوجّه المتصفح إلى مطابقة عرض الصفحة مع عرض الجهاز الفعلي.

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

عند استخدام هذا الوسم، سيتم عرض الصفحة وفق عرض الشاشة الحقيقي. فإذا كان عرض الجهاز 1200px ستُرسم الصفحة على هذا المقاس، وإذا كان 720px ستتكيف الصفحة مع هذا العرض. النتيجة هي تقليل التكبير التلقائي وتحسين تجربة التصفح على الهاتف.

هذا مثال على شكل الموقع من دون وسم <meta> الخاص بـ viewport:

عرض موقع على هاتف صغير بدون استخدام وسم viewport

وهذا شكل الموقع نفسه بعد إضافة وسم <meta> الخاص بـ viewport:

عرض موقع على هاتف صغير بعد إضافة وسم viewport لتحسين التجاوب

2) استخدام استعلامات الوسائط في CSS

الأداة الأهم في بناء موقع متجاوب هي CSS3 Media Queries. تسمح لك هذه التقنية بكتابة قواعد مختلفة بحسب حجم الشاشة، بحيث يتغير مظهر العناصر وسلوك التخطيط عند الوصول إلى نقاط توقف محددة تسمى breakpoints.

الصيغة الأساسية تبدو كالتالي:

@media screen and (max-width: 720px) {
  /* CSS codes go here */
}

يعني هذا أن المتصفح سيطبّق القواعد الموجودة داخل الكتلة عندما يصبح عرض الشاشة أقل من 720px.

في المثال التالي، سيتغير لون الخلفية إلى الرمادي الداكن، وسيتحول لون النص إلى الأزرق عندما يقل عرض الشاشة عن 768px:

<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam delectus molestiae!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis dolor amet nostrum quam! Voluptates nam architecto enim neque nemo consectetur molestias unde fugit dolorum alias temporibus expedita doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis consequuntur placeat maiores voluptas, quos esse eum.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat, nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque! Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!</p>
</body>

@media screen and (max-width: 768px) {
  body {
    background-color: #333;
    color: #3498db;
  }
}

توضيح عمل Media Queries في تغيير تنسيق الصفحة حسب حجم الشاشة

ومن أشهر نقاط التوقف الشائعة:

320px - 480px للهواتف الصغيرة.
478px - 768px للأجهزة اللوحية.
1025px - 1200px للشاشات المكتبية.
وقد تتجاوز الشاشات الكبيرة وأجهزة التلفاز 1200px.

3) جعل النصوص مرنة وقابلة للتكيف

النص الذي يبدو مناسباً على شاشة كبيرة قد يصبح ضخماً أو مربكاً على الهاتف. لذلك من المهم تصغير أحجام الخطوط تدريجياً على الشاشات الصغيرة. وأفضل ممارسة هنا هي استخدام الوحدات النسبية مثل rem وem و% بدلاً من الوحدات الثابتة مثل px.

في المثال التالي، يتم تعيين حجم الفقرة على 3rem للشاشات الكبيرة، ثم تقليصه إلى 1.5rem عندما يصبح العرض أقل من 768px:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam delectus molestiae!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis dolor amet nostrum quam! Voluptates nam architecto enim neque nemo consectetur molestias unde fugit dolorum alias temporibus expedita doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis consequuntur placeat maiores voluptas, quos esse eum.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat, nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque! Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!</p>

@media screen and (max-width: 768px) {
  p {
    font-size: 1.5rem;
  }
}

مثال على النصوص المتجاوبة وتغيير حجم الخط حسب عرض الشاشة

4) تحسين الصور لتناسب مختلف الأجهزة

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

من أبسط الحلول تعيين الخاصيتين display: block وmax-width: 100% لكل صورة، حتى لا تتجاوز عرض الحاوية الخاصة بها:

img {
  display: block;
  max-width: 100%;
}

ويمكن أيضاً استخدام العنصر <picture> لعرض صورة مختلفة بحسب عرض الجهاز، وهو خيار ممتاز عندما تريد تحسين الأداء واختيار نسخة أخف للهواتف.

<picture>
  <source media="(max-width: 1100px)" srcset="freecodecamp-large-logo.jpg" />
  <source media="(max-width: 900px)" srcset="freecodecamp-medium-logo.jpg" />
  <source media="(max-width: 760px)" srcset="freecodecamp-small-logo.jpg" />
  <img src="freecodecamp-large-logo.jpg" alt="freeCodeCamp" style="max-width: 100%" />
</picture>

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

إذا كان العرض أقل من 1100px فسيتم استخدام الصورة الكبيرة المحددة.
إذا كان العرض أقل من 900px فسيتم استخدام الصورة المتوسطة.
إذا كان العرض أقل من 760px فسيتم استخدام الصورة الصغيرة.
إذا لم يتحقق أي شرط، فستظهر الصورة الافتراضية.

مثال على الصور المتجاوبة باستخدام picture وsrcset

تخطيط الصفحة المتجاوب: من الأساليب القديمة إلى الأدوات الحديثة

تخطيط الصفحة هو المسؤول عن ترتيب المحتوى داخل المتصفح. في الماضي، اعتمد المطورون على الجداول أو على float وclearfix، لكن هذه الأساليب كانت معقدة وصعبة الصيانة. أما اليوم، فقد أصبحت Flexbox وCSS Grid الخيار الأكثر كفاءة في بناء واجهات مرنة ومتجاوبة.

استخدام Flexbox في التصميم المتجاوب

عند تطبيق display: flex على العنصر الحاوي، يتم ترتيب العناصر داخله بشكل أفقي افتراضياً. وعبر media query يمكن تغيير الاتجاه إلى عمودي على الشاشات الصغيرة باستخدام الخاصية flex-direction.

هذا مثال يوضح الفكرة:

<body>
  <div class="container-one">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam delectus molestiae!</p>
  </div>
  <div class="container-two">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis dolor amet nostrum quam! Voluptates nam architecto enim neque nemo consectetur molestias unde fugit dolorum alias temporibus expedita doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis consequuntur placeat maiores voluptas, quos esse eum.</p>
  </div>
  <div class="container-three">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat, nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque! Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!</p>
  </div>
</body>

body {
  display: flex;
}

div {
  border: 2px solid #2ecc71;
  margin-left: 6px;
}

@media screen and (max-width: 768px) {
  body {
    flex-direction: column;
  }
}

مثال على استخدام Flexbox لتغيير اتجاه العناصر في التصميم المتجاوب

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

استخدام CSS Grid لبناء تخطيط أكثر قوة

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

يمكن إعادة تنفيذ المثال السابق باستخدام Grid كما يلي:

body {
  display: grid;
  grid-auto-flow: column;
  gap: 6px;
}

div {
  border: 2px solid #2ecc71;
  margin-left: 6px;
}

@media screen and (max-width: 768px) {
  body {
    grid-auto-flow: row;
  }
}

مثال على استخدام CSS Grid لإنشاء تخطيط متجاوب للمحتوى

الميزة الرئيسية هنا أنك تستطيع التحكم في اتجاه تدفق العناصر عبر الخاصية grid-auto-flow، سواء على شكل أعمدة أو صفوف، مع الحفاظ على مرونة عالية في توزع المحتوى.

أفضل ممارسات مهمة عند بناء موقع متجاوب

ابدأ بمنهجية mobile-first ثم وسّع التصميم للشاشات الأكبر.
استخدم الوحدات النسبية مثل rem و% بدلاً من القيم الثابتة كلما أمكن.
لا تكتفِ بتصغير العناصر، بل أعد ترتيب المحتوى بما يخدم تجربة المستخدم.
احرص على أن تكون الصور مرنة وسريعة التحميل.
اختبر الموقع على أكثر من جهاز وحجم شاشة، وليس داخل المتصفح فقط.
استخدم Flexbox وGrid بدل الأساليب القديمة كلما كان ذلك مناسباً.

لماذا أصبح التصميم المتجاوب ضرورة لا خياراً؟

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

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

الخلاصة التقنية

التصميم المتجاوب ليس ميزة إضافية، بل هو أساس في تطوير المواقع الحديثة. تبدأ العملية من وسم viewport، ثم تمتد إلى Media Queries، والنصوص المرنة، والصور القابلة للتكيف، وصولاً إلى تخطيطات قوية باستخدام Flexbox وCSS Grid. من الناحية التقنية، أفضل النتائج تتحقق عندما يُبنى الموقع بعقلية mobile-first مع اختبارات فعلية على الأجهزة المختلفة. هذا النهج لا يحسن تجربة المستخدم فقط، بل يرفع جودة الموقع ويجعله أكثر قابلية للنجاح على المدى الطويل.