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

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

Ayman Alrawy

السؤال

انا الان اقوم بتطبيقات عملية على css واكبر مشكلة تواجهني هي جعل التصميم resposive ما نصائحكم

تم التعديل في بواسطة Mustafa Suleiman
تعديل عنوان السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

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

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

 

تم التعديل في بواسطة عبدالباسط ابراهيم
خطأ إملائي
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

 

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

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

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...