الطريقة الصحيحة لتنفيذ تصميم متجاوب باستخدام css

يعتبر التجاوبية أصبحت أسهل من قبل بفضل استخدام التقنيات الجديدة مثل

• استخدام نظام شبكي grid system أو ال flexbox  لترتيب العناصر بشكل منظم ومرن من خلال استخدامهما يمكنك بكل سهولة جعل التصميم متجاوب بدون كتابة media query  واحدة .
• استخدام وسائط الإعلام media queries لتطبيق قواعد CSS مختلفة بناء على خصائص الجهاز، مثل العرض والارتفاع.
• استخدام صور وأيقونات vector-based أو responsive images لضمان جودة عالية وحجم مناسب على كافة الشاشات.
• استخدام وحدات القياس النسبية حيث تساعد بشكل كبير في تحسين تجاوبية الموقع

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

من الطبيعي جداً مواجهة هذه الصعوبات في بداية تعلمك لتقنيات المهمة مثل جعل الصفحة متجاوبة مع جميع الشاشات ، لكن هناك ممارسات يمكنك تتبعها من أجل جعل الموقع مستجيب مع الشاشات :- 

بالإضافة إلى ما أخبر به المدرب عبدالباسط يمكنك عمل التالي : 

استخدم إطار عمل سريع الاستجابة: هناك العديد من الأطر المتجاوبة المتاحة ، مثل Bootstrap و Foundation ، والتي يمكن أن تساعدك في إنشاء تصميم سريع الاستجابة بشكل أسرع وأسهل.

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

بتاريخ 12 دقائق مضت قال أسامة زيادة:

 

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

هل هذا يعني ان استخدم الميديا كويري مع الشاشات الاكبر واجعل الجوال الاساس

بتاريخ 12 دقائق مضت قال Ayman Alrawy:

هل هذا يعني ان استخدم الميديا كويري مع الشاشات الاكبر واجعل الجوال الاساس

ممكن أن تستخدم الميديا كويري للشاشات الكبيرة وممكن أن تبدأ في الشاشات الصغيرة من خلال الميديا كويري . 

يجب أولاً الإشارة إلى أنه  يتم التحكم في المحتوى والتصميم باستخدام لغتي HTML و CSS معًا وليس CSS فقط، لذلك يجب الإنتباه إلى طريقة بناء العناصر باستخدام HTML.

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

ولكي لا أعيد ما قلته سابقًا،  أنصحك بشدة بقراءة المقالات والنقاشات التالية:

إليك بعض النصائح لجعل التصميم responsive:

1- استخدام وحدات القياس المناسبة مثل الـ percentages والـ rem والـ em بدلاً من الـ pixels.

2- استخدام الـ media queries لتغيير النمط الأساسي للصفحة باستخدام CSS حسب حجم الشاشة.

3- ـيفضل أنت ستخدام grid systems وflexbox لترتيب العناصر على الشاشة بدلاً من Float.

4- استخدام الـ images والفيديوهات المناسبة لأحجام الشاشات المختلفة.

وهذه بعض المقالات المفيدة.