ماذا يعني "الهاتف المحمول أولاً"
جزء من قسم الواجهة الأمامية العملية في رحلة HTML على Coddy. الدرس 6 من 35.
التصميم للهواتف أولًا هو استراتيجية تصميم تُنشئ فيها موقعك للأجهزة المحمولة أولًا، ثم تحسّنه تدريجيًا ليتناسب مع الشاشات الأكبر.
الفكرة الأساسية هي أن معظم المستخدمين يتصفحون الويب الآن على هواتفهم، لذا فإن البدء بالشاشات الصغيرة يضمن أن يعمل موقعك جيدًا لدى غالبية الزوار.
ابدأ بكتابة الأنماط للأجهزة المحمولة:
body {
font-size: 16px;
padding: 10px;
}ثم استخدم استعلامات الوسائط لتكييف تصميمك مع الشاشات الأكبر:
/* تنسيقات للأجهزة التي يزيد عرضها عن 768px */
@media (min-width: 768px) {
body {
font-size: 18px;
padding: 20px;
}
}يضمن هذا النهج أن يعمل موقعك جيدًا على الشاشات الصغيرة أولًا، ثم يحسّن التجربة للمستخدمين على الأجهزة الأكبر.
التحدي
سهللديك HTML يحتوي على قائمة تنقّل بسيطة. مهمتك هي تنسيقها باستخدام نهج الجوال أولًا.
1. أنماط الجوال أولًا
- اجعل كل عنصر في القائمة يشغل العرض الكامل للحاوية (وتُرتَّب العناصر عموديًا).
- اجعل الروابط
display: blockلكي تشغل العرض الكامل. أما بقية التنسيق (الألوان والحدود وما إلى ذلك) فيعود إليك. قد يبدو الشكل كما في صورة المثال أدناه.

2. أنماط الشاشات الأكبر
- يوجد استعلام وسائط مُعدّ مسبقًا للشاشات التي يكون فيها
min-width: 768px. - داخله، غيّر تخطيط القائمة إلى أفقي باستخدام
display: flexمع.menu. - أضف
margin-rightإلى كل عنصر في القائمة (.menu li) لإضافة مسافة بين العناصر، كما في صورة المثال أدناه.

جرّب بنفسك
<!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>يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس الواجهة الأمامية العملية
2إستراتيجية الهاتف المحمول أولاً
ماذا يعني "الهاتف المحمول أولاً"تنسيق النصوص للهاتف المحمول أولاًالتنقل للهاتف المحمول أولاًالصور للهاتف المحمول أولاًالنماذج للهاتف المحمول أولاًتحدي المراجعة5مكونات واجهة المستخدم
القائمة المنسدلةعلامات التبويبالشاراتتلميحات الأدواتلافتات الإشعاراتتحدي المراجعةتدرّب بنفسك: Playground لـ Web