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

مساعدة في responsive web design

عبد الواحد الحدادي

السؤال

مرحبا بكم أساتذتي الكرام وإخواني الأعزاء أينما كنتم؛ 

إنني بحاجة إلى مساعدتكم إذا تكرمتم، أجد مشكلة في responsive web design عندما اقوم بضبط مقاس معين وأنتقل إلى مقاس ثاني أجد محتوى الصفحة غير مناسب، أقوم بضبط هذه المقاسات كاملة ( 1199 بكسل / 991 بكسل / 767 بكسل / 575 بكسل ) وعندما انتقل الى مقاسات اخرى اجد أن الصفحة محتواها غير متوافق، فكيف أقوم بحل هذا المشكل ؟ وهلا تفضلتم بتقديم بعض النصائح لي . 

( مرفق صور توضيحية ) . 

وشكراً جزيلاً لكم .

Screenshot_2020-09-19-21-56-24-60.jpg

Screenshot_2020-09-19-21-56-52-56.jpg

Screenshot_2020-09-19-21-57-07-38.jpg

Screenshot_2020-09-19-21-57-21-28.jpg

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

Recommended Posts

  • 0

إن عملية ضبط مقياس الصورة لكل حجم شاشة بالضبط هو مهمة صعبة جدا فنحن نضع مجالات كاملة لقيم عرض الشاشة ليعمل عليها تنسيق معين..

عليك استخدام خاصية media query التي تدعمها css مثلا من موقع w3schools

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

كما لدينا نقاط مفصلية لحجم الشاشات يُعمل بها عالميا:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

يمكنك التعلم من خلال هذه السلسلة: الفيديو الأول

لاحقا أنصحك بتعلم إطار العمل الخاص ب JS+CSS الذي يدعى Bootstrap وهو إطار العمل الأكثر شهرة لتصميم واجهات المستخدم في الويب Front-end

إذا تفضلت وقمت بتحميل ملفات التصميم بحيث نستطيع الاطلاع عليها وتعديلها لك (مع توضيح أماكن الأخطاء في السورس كود خاصتك) لايوجد مشكلة.

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

  • 0
بتاريخ 20 دقائق مضت قال Wael Aljamal:

إن عملية ضبط مقياس الصورة لكل حجم شاشة بالضبط هو مهمة صعبة جدا فنحن نضع مجالات كاملة لقيم عرض الشاشة ليعمل عليها تنسيق معين..

عليك استخدام خاصية media query التي تدعمها css مثلا من موقع w3schools


@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

كما لدينا نقاط مفصلية لحجم الشاشات يُعمل بها عالميا:


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

يمكنك التعلم من خلال هذه السلسلة: الفيديو الأول

لاحقا أنصحك بتعلم إطار العمل الخاص ب JS+CSS الذي يدعى Bootstrap وهو إطار العمل الأكثر شهرة لتصميم واجهات المستخدم في الويب Front-end

شكرا لك أستاذي على هذا التوضيح المفيد .

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...