طَبِّقْهاتعلّم المبدأ، وطبّقه بيدكمقرر 131 · تقنيات تطوير الواجهات الأمامية
الدرس 21 · الوحدة 6: تنسيق صفحات الويب باستخدام CSS

التصميم المتجاوب

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

www.example.com
بعد هذا الدرس ستستطيع أن:
  • تضيف سطر viewport وتعرف وظيفته.
  • تستخدم الوحدات المرنة و max-width.
  • تكتب استعلامات الوسائط بطريقة «الجوال أولًا».
  • تختبر الصفحة بعرض الجوال في أدوات المتصفح.
جرّب بنفسك أسئلة التقييم

١صفحة واحدة لكل الشاشات

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

  1. سطر viewport في head.
  2. وحدات مرنة بدل الأعرض الثابتة.
  3. استعلامات الوسائط Media Queries: قواعد تعمل عند عرض معيّن فقط.

٢سطر viewport

بدونه يعرض الجوال الصفحة وكأنها شاشة حاسوب مصغّرة، فيصغر الخط جدًّا. ضعه في head كل صفحة:

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

معناه: «اجعل عرض الصفحة بعرض الجهاز، ولا تصغّرها». اختصار VS Code ( ! ثم Enter ) يكتبه لك تلقائيًّا.

٣وحدات مرنة

<div class="wrap">  <img src="images/coffee.svg" alt="قهوة">  <p>الصورة لا تخرج عن الحاوية أبدًا.</p></div>
index.html
القاعدةلماذا؟
width: 90% بدل width: 900pxالنسبة تتبع عرض الشاشة، والرقم الثابت يخرج عن الجوال.
max-width: 600pxلا تتجاوز 600 في الشاشات الكبيرة حتى لا تطول الأسطر.
img { max-width: 100%; }الصورة لا تتجاوز عرض حاويتها أبدًا.
remللخطوط والمسافات، تتبع إعداد حجم الخط عند الزائر.

٤استعلامات الوسائط

@media قاعدة شرطية: «إذا كان عرض الشاشة كذا، فطبّق هذه القواعد». نكتب للجوال أولًا، ثم نضيف للشاشة الكبيرة:

<div class="cards">  <div class="card">بايثون</div>  <div class="card">الويب</div>  <div class="card">قواعد البيانات</div></div>
index.html

جرّب: اضغط «✏️ جرّب وعدّل» ثم زر 📱 لترى المعاينة بعرض الجوال، و 💻 لعرض الحاسوب. البطاقات تنتقل من عمود إلى صف.

الشرطمعناه
@media (min-width: 600px)العرض 600 فأكثر (الأجهزة اللوحية والحاسوب). نستخدمه مع «الجوال أولًا».
@media (max-width: 599px)العرض 599 فأقل (الجوال).

٥اختبر صفحتك على الجوال

  1. في Chrome اضغط F12، ثم أيقونة الجوال 📱 (Toggle device toolbar) أو Ctrl+Shift+M.
  2. اختر جهازًا من القائمة أعلى الصفحة (مثل iPhone)، أو اسحب الحافة لتغيير العرض.
  3. تأكد: لا يوجد تمرير أفقي، والخط مقروء، والأزرار كبيرة بما يكفي للإصبع.
  4. وأفضل اختبار: افتح الموقع على جوالك الحقيقي.

توقّع وتحقّق

ما وظيفة سطر viewport؟

width=device-width.

قاعدة تعمل في الشاشات من 768 فأكثر:

min = فأكثر.

كيف نمنع الصورة من الخروج عن الشاشة؟

لا تتجاوز حاويتها.

في «الجوال أولًا» نكتب أولًا:

الأصغر أولًا.

الخلاصة

تحدٍّ برمجي: صفحة الدورات المتجاوبة

متقدم

اجعل صفحة الدورات متجاوبة: عمود واحد في الجوال، وصف من ثلاث بطاقات من 700 بكسل فأكثر. جرّب بزري 📱 و 💻 فوق المعاينة.

المطلوب:
  • سطر viewport في head.
  • الصورة .banner لا تتجاوز عرض الحاوية (max-width: 100%).
  • البطاقات .course عمود واحد افتراضيًّا (للجوال).
  • استعلام @media (min-width: 700px) يجعل .courses صفًّا.
👀 اعرض شكل الناتج المطلوب
الناتج المطلوب
✓ التحقق الآلي من حلّك:
  • سطر viewport في head.
  • الصورة لا تتجاوز عرض الحاوية.
  • عمود واحد افتراضيًّا (خارج @media).
  • @media (min-width: 700px) يجعل .courses صفًّا.

💡 تلميح 1
خارج @media: .courses { flex-direction: column; }
💡 تلميح 2
@media (min-width: 700px) { .courses { flex-direction: row; } }

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

<!DOCTYPE html><html lang="ar" dir="rtl"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>الدورات</title>  <link rel="stylesheet" href="style.css"></head><body>  <img class="banner" src="images/team.svg" alt="فريق المدربين" width="900">  <div class="courses">    <div class="course">بايثون</div>    <div class="course">تطوير الويب</div>    <div class="course">قواعد البيانات</div>  </div></body></html>
انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←