جعل الموقع متجاوب

السلام عليكم ورحمة الله تعالى وبركاته،

لجعل الموقع يكون متجاوبا مع مختلف أحجام الشاشات يجب أن يكون هذا السطر موجودا في ملف ال html الرئيسي لديك:

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

وهو موجود بالفعل في ملف index.html فبدونه الأجهزة مثل الهواتف والأجهزة اللوحية ستعرض موقعك كما لو أنه على شاشة كبيرة ولا تحترم تغييرات ال CSS مثل width: 100% أو flex-wrap وغيرها.

أي أنه ليصبح متجاوبا الآن يجب تعديل ملف ال style.css من خلال إضافة قواعد التجاوب التالية:

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .navbar nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .hero {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .card {
    flex-direction: column;
    gap: 2rem;
    margin-top: 50px;
  }

  .about {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
    gap: 2rem;
  }

  .skills {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .contact {
    flex-direction: column;
    padding: 1rem;
    text-align: center;
  }
}

يمكنك إضافتها في آخر الملف وبعد إضافتها ستلاحظ أن الموقع أصبح متجاوبا هكذا:

يمكنك اختبار ذلك من خلال فتح الموقع في المتصفح ثم الضغط F12 أو استخدم "أدوات المطور" ثم اختر "وضع الهاتف".

أولا يجب عليك تحديد شكل الموقع عند كل شاشة معينة تريدها . فيجب عليك تحديد كل قسم بشكل منفصل وتنظر كيف تريد أن تجلعه يظهر في الشاشات المختلفة .

وبناء عليه يمكنك إستخدام ال Media query في css لتحديد تنفيذ الكود بداخله على أحجام شاشات معينة .

فمثلا لجعل أول قسم "hero" يظهر متجاوب نجعل هنا الإتجاه الخاص ب flex أعمدة وليس صفوف ونرى أى حجم الشاشة الصحيح هو970px هكذا :

@media (max-width: 970px) {
    .hero{
        flex-direction: column;
        gap: 2rem;
    }
    .hero .text{
        text-align: center;
    }
}

الآن أنظر كيف تغير التنسيق للشاشات الأصغر من 970px :

 ولجعل القسم الأخير أيضا متجاوب يمكنك إضافة الكود التالي :

@media (max-width: 970px) {
    .skills {
        gap: 2rem;
        flex-wrap: wrap;
    }
    .skills .text{
        width: 100%;
    }
}

وستجد الآن يظهر بشكل أفضل :

وهكذا بناء على التصميم الذي لديك يمكنك تحديد كل قسم وأنظر كيف تريده أن يظهر وحينها تضع التنسيقات بداخل ال Media query .

وإليك الدرس التالي لكيفية التعامل مع ال Media query :