ماذا يعني "الهاتف المحمول أولاً"

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 6 من 35.

نهج الهاتف المحمول أولاً (Mobile-first) هو استراتيجية تصميم حيث تقوم ببناء موقعك الإلكتروني للأجهزة المحمولة أولاً، ثم تقوم بتحسينه تدريجياً للشاشات الأكبر.
الفكرة الأساسية هي أن معظم المستخدمين يتصفحون الويب الآن عبر هواتفهم، لذا فإن البدء من الشاشات الصغيرة يضمن عمل موقعك بشكل جيد لغالبية الزوار.

ابدأ بكتابة أنماط الهاتف المحمول:

body {
  font-size: 16px;
  padding: 10px;
}

ثم استخدم استعلامات الوسائط (media queries) لتكييف تصميمك مع الشاشات الأكبر:

/* أنماط للأجهزة التي يزيد عرضها عن 768 بكسل */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

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

التحدي

سهل

لقد تم تزويدك بملف HTML يحتوي على قائمة تنقل بسيطة. مهمتك هي تنسيقها باستخدام نهج الهاتف أولاً (mobile-first approach).

1. تنسيقات الهاتف أولاً

اجعل كل عنصر من عناصر القائمة يأخذ العرض الكامل للحاوية (مرتبة عمودياً).
اجعل الروابط display: block بحيث تأخذ العرض الكامل. باقي التنسيقات (الألوان، الحدود، إلخ) تعود إليك. قد تبدو كما في الصورة التوضيحية أدناه.

2. تنسيقات الشاشات الأكبر

تم توفير استعلام وسائط (media query) بالفعل للشاشات ذات min-width: 768px.
بداخله، قم بتغيير تخطيط القائمة إلى أفقي باستخدام display: flex للفئة .menu.
اضبط التباعد بين عناصر القائمة بحيث يتطابق مع الصورة التوضيحية أدناه.

ورقة مرجعية

نهج "الجوال أولاً" (Mobile-first) هو استراتيجية تصميم تقوم فيها ببناء موقعك الإلكتروني للأجهزة المحمولة أولاً، ثم تحسينه تدريجياً للشاشات الأكبر.

ابدأ بكتابة أنماط الجوال:

body {
  font-size: 16px;
  padding: 10px;
}

ثم استخدم استعلامات الوسائط (media queries) لتكييف تصميمك مع الشاشات الأكبر:

/* أنماط للأجهزة التي يزيد عرضها عن 768 بكسل */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

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

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>What “mobile-first” means</title>
  <style>
    /* Write your mobile-first CSS here */
    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu li {
      margin-bottom: 10px;
    }
    
    .menu a {
      
    }
    
    /* Bigger screen styles */
    @media (min-width: 768px) {
      .menu {
       
      }
      
      .menu li {
      
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>