هناك عامل آخر يؤدي إلى التركيز على التصميم سريع الاستجابة للجوال أولاً وهو أن معظم الأشخاص يصلون إلى الإنترنت عبر أجهزتهم المحمولة، وهو ما يمثل 60%. بينما يستخدم 20% فقط من الأشخاص الإنترنت على أجهزة الكمبيوتر المكتبية.
ستغطي هذه المقالة الإرشادات الخاصة بإنشاء التصميم سريع الاستجابة للجوال أولاً.
كيفية إعداد التصميم المستجيب للجوال أولاً؟
يمكن إنشاء التصميم سريع الاستجابة سواء كان مستجيبًا للجوال أولاً أو للشاشات الأكبر حجمًا باتباع الطرق الموضحة أدناه:
- قم بإنشاء تصميم سريع الاستجابة للجوال أولاً.
- استخدم/استخدم استعلام الوسائط لتطوير/إنشاء تصميم سريع الاستجابة للشاشات الأكبر حجمًا.
الطريقة الأولى: إنشاء تصميم سريع الاستجابة للجوال أولاً
أولاً، ابدأ بإنشاء نهج تصميم الهاتف المحمول أولاً. ولهذا الغرض، اتبع التعليمات المتدرجة الواردة أدناه.
الخطوة 1: إنشاء بنية HTML
أولاً، قم بإنشاء بنية HTML وأضف ' بوتستراب ' في ال <الرأس> قسم. لمعرفة كيفية إضافة ورقة أنماط في قسم HTML انقر على هذا وصلة . بعد إنشاء البنية الأساسية لموقع الويب بما في ذلك، <لا شيء> , <الرأس> و <تذييل الصفحة> كما هو موضح أدناه:
< جسم ><الرأس>
<لا شيء>
< ماي >
< الذي - التي >< أ href = '#' > بيت < / أ >< / الذي - التي >
< الذي - التي >< أ href = '#' > معلومات عنا < / أ >< / الذي - التي >
< الذي - التي >< أ href = '#' > خدماتنا < / أ >< / الذي - التي >
< الذي - التي >< أ href = '#' > اتصل بنا < / أ >< / الذي - التي >
< / ماي >
< / لا>
< / رأس>
<الرئيسية>
<القسم>
< h1 > مرحبًا بك في تلميح Linux < / h1 >
< ص > موقع دروس. < / ص >
< / القسم>
< / رئيسي>
<تذييل الصفحة>
< ص > تلميح لينكس حقوق الطبع والنشر < / ص >
< / تذييل الصفحة>
< / جسم >
الخطوة 2: تطبيق CSS
في قسم الجسم، قم بتعيين ' خط العائلة ' ل ' بلا الرقيق '. قم أيضًا بتعيين الحشو والهامش ولون الخلفية. بعد ذلك قم بتطبيق CSS على الرأس والتذييل والتنقل:
جسم {خط العائلة : بلا الرقيق ;
هامِش : 0 ;
حشوة : 0 ;
لون الخلفية : #808080 ;
}
header {
لون الخلفية : أرجواني ;
لون : أبيض ;
حشوة : 8 بكسل ;
}
التنقل {
نوع نمط القائمة : لا أحد ;
حشوة : 0 ;
هامِش : 0 ;
}
سفينتهم {
هامِش : 4 بكسل 0 ;
}
التنقل ماي لي أ {
لون : أبيض ;
زخرفة النص : لا أحد ;
}
رئيسي {
حشوة : 18 بكسل ;
}
تذييل {
لون الخلفية : لون القرنفل ;
لون : أبيض ;
محاذاة النص : مركز ;
حشوة : 8 بكسل ;
}
كما يمكن ملاحظته، أكد الناتج أدناه أن التصميم يستجيب للجوال أولاً:
الطريقة الثانية: استخدام استعلامات الوسائط لإنشاء تصميم سريع الاستجابة للشاشات الأكبر حجمًا
يمكن أيضًا إنشاء التصميم أعلاه للشاشات الأكبر حجمًا مثل الأجهزة اللوحية وأجهزة الكمبيوتر المكتبية. ولهذا الغرض، يحتاج المستخدمون إلى تضمين استعلام الوسائط في CSS. العرض للأقراص هو ' 786 بكسل 'ولأجهزة سطح المكتب هي' 1024 بكسل '.
لتطبيق استعلامات الوسائط، قم أولاً بتضمين ' @وسائط علامة '' في ملف CSS. بعد ذلك، حدد خاصية 'min-width' باسم ' 768 بكسل '. وهذا يعني أنه عندما يتم استيفاء الحد الأدنى لحجم الشاشة '768 بكسل' أو أعلى، فسيتم تطبيق CSS التالي:
@وسائط ( الحد الأدنى للعرض : 768 بكسل ) {جسم {
حجم الخط : 14 بكسل ;
}
header {
حشوة : 18 بكسل ;
}
التنقل {
عرض : ثني ;
}
سفينتهم {
هامِش : 0 8 بكسل ;
}
رئيسي {
عرض : ثني ;
تبرير المحتوى : الفضاء بين ;
محاذاة العناصر : مركز ;
}
تذييل {
حشوة : 18 بكسل ;
}
}
يوضح الناتج أدناه أن التصميم يستجيب أيضًا للشاشات الأكبر حجمًا:
خاتمة
لإعداد تصميم سريع الاستجابة للجوال أولاً، قم أولاً بإنشاء بنية HTML وإضافة إطار العرض. بعد ذلك قم بربط ملف CSS في علامة الرأس. ثم قم بتطبيق CSS استنادًا إلى التصميم سريع الاستجابة للجوال أولاً. علاوة على ذلك، يمكن للمستخدمين إضافة استعلام وسائط CSS لضبطه على الجهاز المحمول. لقد أظهرت هذه المقالة إجراءً تفصيليًا لإعداد تصميم سريع الاستجابة للجوال أولاً.