كيف أقوم بحل مشاكل التجاوب في portfolio

مشاكل ال responsive design تحصل بسبب عدم ضبط الbreak points الخاصة بال Media query  أو عدم استخدام خواص ال position  بشكل صحيح. ينصح دائما بالتجربة أثناء العمل واستخدام الdeveloper tools الخاصة بالمتصفح فيتم تصغير وتكبير الشاشة وتعديل الأخطاء عندما يخرب التصميم عند حجم شاشة معين. الرجاء تزويد الخطأ الذي يحصل المرة القادمة لكي نعمل على إصلاحه.

حل المشكلة يبدأ في بداية كتابة الكود للتصميم، حيث عليك الإعتماد على flexbox و grid قدر الإمكان، وستجد أن أغلب مشاكل التجاوب لم تعد موجودة، وستحتاج إلى تعديلات ليست بالكثيرة لضبط التصميم على مقاسات الشاشة المختلفة وذلك يسمى break points أي النقطة أو المقاس التي يحدث بها مشكلة في التصميم.

ولحل المشكلة عند تلك النقطة نستخدم media query ليتم تنفيذ تنسيقات عند ذلك المقاس فقط.

أيضًا استخدام وحدة rem بدلاً من الـ px.

لذلك إذا قمت ببناء العناصر بشكل جيد وقمت باستخدام Grid و Flex وبالأخص Grid بشكل صحيح، ستقل نسبة استخدامك للـ Media Query بشكل كبير جدًا، وذلك يعرف باسم Fluid Layouts.

ولتفقد تجاوب الموقع ستحتاج إلى استخدام أداة المطورين في المتصفح بالضغط على CTRL + SHIFT + M وستظهر لك الأداة مباشرًة.

أنصحك بمشاهدة التالي:

وقراءة التالي:

أولاً بالنسبة لحل مشاكل التجاوب في موقعك فذلك يتطلب تحليل التصميم الحاليوفحص الكود لديك وإجراء تحسينات لضمان ظهوره بشكل جيد على جميع الأجهزة .

ولذلك يمكنك الإستفادة من النصائح السابقة ومحاولة تطبيقها في موقعك مع أنه سيكون من الصعب تطبيق ذلك مع الكود الحالي ولكن حاول تطبيق مايلي

• حاول استخدام ال Media Queries بشكل سليم 
• يرجى محاولة استخدام الوحدات النسبية بدلاً من ال px فيمكنك استخدام وحدات مثل ال em وال rem 

وإذا لم تستطع حل المشكلات يمكنك توضيح الأخطاء مع مجلد المشروع ونساعدك على حل المشكلة