التصميم المتجاوب في CSS: موقع لكل الشاشات

الدرس 9 من 19 · CSS

أكثر من نصف زوار المواقع اليوم يتصفحون من هواتفهم، وفي بلادنا العربية النسبة أعلى من ذلك بكثير. الموقع الذي يبدو رائعاً على الكمبيوتر لكنه يجبر زائر الموبايل على التكبير والتمرير يميناً ويساراً سيخسر زواره بسرعة. في هذا الدرس ستتعلم التصميم المتجاوب (Responsive Design): كيف تبني صفحة واحدة تتكيف مع كل الشاشات.

الفكرة: الماء يأخذ شكل الإناء

صاحب فكرة التصميم المتجاوب استلهمها من الماء: إذا سكبته في كوب أخذ شكل الكوب، وإذا سكبته في زجاجة أخذ شكل الزجاجة. صفحتك يجب أن تكون مثل الماء: نفس المحتوى، لكن ترتيبه يتغير حسب حجم الشاشة.

مثلاً، بطاقات الكورسات:

على الكمبيوتر: 4 بطاقات في الصف.
على التابلت: بطاقتان.
على الموبايل: بطاقة واحدة بعرض الشاشة.

الخطوة الأولى: وسم viewport

تعرفت على هذا السطر في كورس HTML، والآن ستفهم أهميته الحقيقية:

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

بدونه، يتظاهر متصفح الهاتف بأن شاشته عرضها حوالي 980px، ثم يصغّر الصفحة كلها لتناسب الشاشة، فيصبح النص ضئيلاً جداً. هذا السطر يقول له: «استخدم عرض الشاشة الحقيقي». بدونه لا يعمل أي شيء آخر في هذا الدرس.

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

تجنّب العرض الثابت بالبكسل للحاويات الكبيرة:

/* سيئ: يخرج عن شاشة موبايل عرضها 360px */
.container {
  width: 900px;
}

/* جيد: يملأ الشاشة الصغيرة، ولا يتجاوز 900px على الكبيرة */
.container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

max-width من أهم خصائص التصميم المتجاوب: «كن مرناً، لكن لا تتجاوز هذا الحد».

وحدات مرنة مفيدة:

الوحدة	معناها
`%`	نسبة من عرض العنصر الأب
`rem`	نسبة من حجم الخط الأساسي
`vw`	نسبة من عرض الشاشة: `100vw` عرضها كاملاً
`vh`	نسبة من ارتفاع الشاشة: `100vh` ارتفاعها كاملاً

الخطوة الثالثة: الصور المرنة

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

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

المعنى: «لا تكوني أعرض من الصندوق الذي يحتويك، وحافظي على نسبة أبعادك».

الخطوة الرابعة: استعلامات الوسائط

الأداة الأساسية في التصميم المتجاوب هي استعلام الوسائط (Media Query): قواعد CSS لا تُطبق إلا إذا تحقق شرط معين في الشاشة:

.cards {
  display: grid;
  grid-template-columns: 1fr; /* عمود واحد افتراضياً */
  gap: 16px;
}

/* إذا كان عرض الشاشة 600px أو أكثر */
@media (min-width: 600px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* إذا كان عرض الشاشة 1000px أو أكثر */
@media (min-width: 1000px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

اقرأ الاستعلام كأنه جملة شرطية: «إذا كان عرض الشاشة 600px أو أكثر، فطبّق هذه القواعد». والقواعد داخل الاستعلام تغطي القواعد التي قبلها، لأنها تأتي بعدها في الترتيب.

النقاط التي يتغير عندها التصميم تسمى نقاط التوقف (Breakpoints). لا توجد أرقام سحرية، لكن قيماً مثل 600px و 900px و 1200px شائعة. والأفضل أن تختارها حسب محتواك: كبّر نافذة المتصفح وصغّرها، وعندما يبدأ التصميم بالانكسار، ضع نقطة توقف.

الموبايل أولاً (Mobile First)

لاحظ أن المثال السابق بدأ بتصميم الموبايل (عمود واحد)، ثم أضاف التعديلات للشاشات الأكبر بـ min-width. هذا الأسلوب يسمى الموبايل أولاً، وله مزايا:

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

أدوات تجعل الأمر أسهل

تذكّر أن بعض ما تعلمته في الدروس السابقة متجاوب بطبيعته، دون أي استعلام وسائط:

flex-wrap: wrap في Flexbox يلفّ العناصر عند ضيق المساحة.
repeat(auto-fit, minmax(200px, 1fr)) في Grid يغيّر عدد الأعمدة تلقائياً.
rem و % و max-width تجعل الأحجام تتكيف بنفسها.

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

جرّب بنفسك

استعلام الوسائط داخل صندوق التجربة يقيس عرض الصندوق نفسه لا عرض شاشتك، ونقطة التوقف هنا 500px. إذا كنت على الكمبيوتر فالصندوق أعرض منها، فسترى عمودين وخلفية بنفسجية؛ غيّر الرقم إلى 2000px وشغّل لترى شكل الموبايل. وإذا كنت على الموبايل فسترى عموداً واحداً؛ غيّر الرقم إلى 250px لترى شكل الشاشات الأوسع:

جرّب بنفسكCSS

أو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

نسيان وسم viewport: كل استعلامات الوسائط ستبدو وكأنها لا تعمل على الهاتف، لأن المتصفح يتظاهر بشاشة عريضة.
عرض ثابت بالبكسل: عنصر واحد بعرض 600px يكفي ليُظهر شريط تمرير أفقي مزعج على الموبايل. استخدم max-width.
الاختبار على الكمبيوتر فقط: صغّر نافذة المتصفح أو استخدم وضع الأجهزة في أدوات المطور، وجرّب على هاتف حقيقي إن أمكن.

اختبر نفسك

سؤال

ماذا تعني القاعدة @media (min-width: 768px) { ... }؟

سؤال

أي قاعدة تمنع الصور من الخروج عن عرض الشاشة الصغيرة؟

الخلاصة

التصميم المتجاوب صفحة واحدة يتغير ترتيبها حسب حجم الشاشة.
وسم viewport ضروري، وبدونه لا يعمل التصميم المتجاوب على الهواتف.
استخدم % و rem و max-width، و img { max-width: 100%; } للصور.
@media (min-width: ...) تطبق قواعد عند عرض معين، وابدأ بالموبايل أولاً.
اختبر صفحتك دائماً على عرض موبايل حقيقي أو من أدوات المطوّر قبل نشرها.

عن مدرسة البرمجة

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