اذهب إلى المحتوى

السؤال

نشر

السلام عليكم

اي طريقة عرض للشاشة كما في الشاشات الصغيرة هي الصحيحة؟

جربت اشغل وضع الهاتف الجوال وجربت اصغر حجم النافذة 

لكن النتيجة اختلفت بين الطريقتين

وفي الطريقة الثانية ، الاسم والقائمة ما صاروا متناسقات تحت بعض

مستند Microsoft Word جديد (2).docx

Recommended Posts

  • 0
نشر

عند فحص توافق الموقع مع مختلف أحجام الشاشات نقوم بذلك من خلال أدوات المطورين (inspect) ، وهي الطريقة الأولى التي في الصورة الأولى وبحيث تعتبر أدق من تصغير حجم المتصفح وتطعي نتائج أفضل لتوافق المواقع مع الشاشات وأيضاً ويوفر لك عدَة من أحجام حقيقية الشاشات الجوال والتابلت يمكنك استخدمها في فحص توافق الموقع  ، أما عن الإسم والقائمة في الصورة ألاحظ أنها تحت  بعضهما لكن مع اختلاف بسيط ، وأعتقد أنه ظهر مع المدرب بهذا الشكل أو يمكنك مراجعة رؤية شيفرة CSS ورؤية ماذا المختلف مع المدرب .

  • 0
نشر

من خلال developer tools في المتصفح تجد مجموعة من أهم أحجام الشاشات (القياسية) للهواتف (mobiles) والحواسب اللوحية (tablets) الأكثر شيوعاً  في سوق العمل, كما تجد خياراً أخر يدعى responsive يمكنك من خلاله تغيير حجم الشاشة ومشاهدة التغيير الحاصل على التنسيق العام لتطبيق الويب الذي تعمل عليه وكلا الطريقتين صحيحتين ولكن الأمر يعتمد كثيراً على شريحة المستخدمين المستهدفة. مثلاً يعمد بعض أصحاب المشاريع الى صناعة تطبيق متجاوب responsive مع طيف معين من الأجهزة دون أخرى طبقاً للمنطقة الجغرافية التي يتواجد فيها المستخدم end user ونوع الأجهزة التي يستعملها وفق دراسات مسبقة. 

بالنسبة للمشكلة في navbar لديك يمكنك إستهداف نطاق الأحجام التي تظهر فيها مشكلة التنسيق من خلال عمل media query بسيطة لحل المشكلة وفق الرؤية التالية

@media only screen and (min-width: ?) and (max-width: ?) {
    //font-size يمكنك هنا تغيير حجم الخط  مثلا لمحتويات القائمة
    //للعنصر الحاوية لمحتويات القائمة display يمكنك إيضا تغيير طريقة العرض
}
// ? علامة الإستفهام تضع بمكانها مدى الحجم المستهدف

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...