🌐 التصميم المتجاوب للويب: اجعل موقعك يتكيف مع أي جهاز!

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

🤔 ما هو التصميم المتجاوب (Responsive Web Design)؟

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

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

📱 الخطوة الأولى: علامة Viewport Meta

لتبدأ أي صفحة ويب متجاوبة بشكل صحيح، يجب أن تضيف علامة <meta> خاصة تسمى viewport داخل قسم <head> من مستند HTML. هذه العلامة تخبر المتصفح بكيفية التحكم في أبعاد الصفحة وقياسها.

مثال على الكود:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <!-- هذه هي العلامة الأكثر أهمية للتصميم المتجاوب -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>موقعي المتجاوب</title>
</head>
<body>
    <h1>مرحباً بالعالم!</h1>
    <p>هذا موقعي المتجاوب الأول.</p>
</body>
</html>

    <!-- شرح بسيط للكود أعلاه -->
    <!--
    width=device-width: تجعل عرض الصفحة يساوي عرض شاشة الجهاز.
    initial-scale=1.0: تعيين مستوى التكبير الأولي للصفحة إلى 100% (بدون تكبير).
    -->

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

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

لجعل العناصر مرنة وتتكيف مع المساحة المتاحة، نستخدم وحدات قياس نسبية في CSS بدلاً من الوحدات الثابتة مثل px (بكسل).

الوحدات النسبية الرئيسية:

  • % (النسبة المئوية): مثالية لعرض العناصر مثل <div> أو <img>. إذا عينت width: 100% لعنصر، فسيملأ العرض الكامل للعنصر الأب الذي يحتويه.
  • vw (عرض نافذة العرض): 1vw يساوي 1% من عرض نافذة المتصفح. width: 50vw يعني أن العنصر سيشغل نصف عرض الشاشة.
  • vh (ارتفاع نافذة العرض): 1vh يساوي 1% من ارتفاع نافذة المتصفح.

مقارنة بسيطة:

<!-- HTML -->
<div class="box-static">صندوق ثابت (400px)</div>
<div class="box-fluid">صندوق مرن (80%)</div>

/* CSS */
.box-static {
    width: 400px; /* ثابت، قد يسبب مشاكل على الشاشات الصغيرة */
    background-color: lightblue;
    padding: 10px;
    margin-bottom: 10px;
}

.box-fluid {
    width: 80%; /* مرن، سيأخذ 80% من عرض العنصر الأب (body) */
    background-color: lightcoral;
    padding: 10px;
}

    <!--
    سيبقى الصندوق الثابت بعرض 400 بكسل دائماً، حتى على شاشة هاتف بعرض 360 بكسل، مما سيسبب ظهور شريط تمرير أفقي غير مرغوب فيه.
    بينما الصندوق المرن سيتقلص ليناسب الشاشة الصغيرة.
    -->

✂️ الخطوة الثالثة: استعلامات الوسائط (Media Queries)

هذه هي الأداة الأقوى في التصميم المتجاوب. تسمح لنا Media Queries بتطبيق styles مختلفة من CSS بناءً على ظروف معينة، مثل عرض الشاشة.

البنية الأساسية لـ Media Query:

@media (شرط) {
  /* قواعد CSS التي ستطبق فقط إذا تحقق الشرط */
}

أمثلة على الشروط الشائعة:

  • (max-width: 768px) → تطبق إذا كان عرض الشاشة 768px أو أقل (مقاس الهواتف والأجهزة الصغيرة).
  • (min-width: 769px) → تطبق إذا كان عرض الشاشة 769px أو أكبر (مقاس الأجهزة الأكبر).

مثال عملي: تغيير لون الخلفية حسب حجم الشاشة

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال Media Query</title>
    <style>
        body {
            background-color: lightgreen; /* لون افتراضي للأجهزة الكبيرة */
            padding: 20px;
        }

        /* عندما يكون عرض الشاشة 600px أو أقل، غيّر لون الخلفية */
        @media (max-width: 600px) {
            body {
                background-color: lightblue; /* لون للهواتف */
            }
        }
    </style>
</head>
<body>
    <h1>جرب تغيير حجم نافذة المتصفح!</h1>
    <p>لون الخلفية سيتغير إلى الأزرق عندما يصبح العرض 600px أو أقل.</p>
</body>
</html>

مثال أكثر فائدة: تحويل القائمة من أفقية إلى رأسية

.nav-menu {
    display: flex; /* يجعل عناصر القائمة بجانب بعضها (أفقي) */
}

/* على الشاشات الصغيرة، اجعل القائمة عمودية */
@media (max-width: 768px) {
    .nav-menu {
        display: block; /* يعيد العناصر إلى التكديس العمودي */
    }
    .nav-menu a {
        display: block;
        padding: 10px;
    }
}

🖼️ نصيحة سريعة: جعل الصور متجاوبة

لضمان أن الصور لا تتعدى عرض عنصرها الأب وتسبب مشاكل، نضيف قاعدة CSS بسيطة لها.

img {
    max-width: 100%; /* الصورة لن تتعدى عرض الحاوية التي بداخلها */
    height: auto; /* يحافظ على نسبة الأبعاد (التناسب) للصورة */
}

بهذه القاعدة، ستتقلص الصورة تلقائياً لتناسب الشاشات الصغيرة دون تشويه.

🧪 جرب بنفسك

أفضل طريقة لفهم التصميم المتجاوب هي التجربة. أنشئ ملف HTML بسيط يحتوي على عناصر مثل عناوين وفقرات وصور. ثم استخدم ما تعلمته:

  1. أضف علامة viewport.
  2. استخدم width: 100% أو max-width للعناصر.
  3. أضف Media Query لتغيير ألوان أو تخطيط العناصر عندما تصبح الشاشة صغيرة.
  4. افتح الملف في المتصفح وحاول تغيير حجم النافذة وشاهد التغييرات!