مشكلة عدم ظهور الموقع بالتنسيق المناسب عند استخدام media queries في CSS

السؤال الأول حسب ما اطلعت عليه في الصورة المرفقة أنك مستخدم min-width لكلا الشاشات من 767px فما فوق أيضا الشاشات 1199px فما فوق ، هنا يجب كتابة الكود التالي لتصحيح الخطأ الذي يحدث 

@media (min-width: 767px) and (max-width: 1199px)
{
    div{
        flex-basis: 50%
    }

}

@media (min-width: 1199px)
{
    div{
        flex-basis: 25%
    }

}

السؤال الثاني في الكود الأول  

media (max-width: 767px) {
  div {
  	display: none;
  }
}

سوف يتم إخفاء العنصر لشاشات من حجم 0 إلى 767px 

في الكود الثاني 

media (min-width: 767px) {
  div {
  	display: none;
  }
}

سوف يتم إخفاء العنصر عند وصول حجم الشاشة إلى 767px وحجم الشاشات ما فوق .

إنها مشكلة غريبة حقا, قمت بعمل ما فعلت لكن لم يعمل معي الأمر, كتبت الكود في موقع codepen, و حاولت تجربة الأمر فوجدته يعمل!
المشكلة إذن ليس في الكود الذي كتبته لي و إنما في مكان آخر, فبرأيك أين قد تقع المشكلة ؟

بتاريخ الآن قال الشخص المصمم:

إنها مشكلة غريبة حقا, قمت بعمل ما فعلت لكن لم يعمل معي الأمر, كتبت الكود في موقع codepen, و حاولت تجربة الأمر فوجدته يعمل!
المشكلة إذن ليس في الكود الذي كتبته لي و إنما في مكان آخر, فبرأيك أين قد تقع المشكلة ؟

هل يمكنك إرفاق ملفات المشروع ؟ حتى أستطيع النظر إليها وفهم أين المشكلة بالتحديد لديك  

بتاريخ 31 دقائق مضت قال الشخص المصمم:

إنها مشكلة غريبة حقا, قمت بعمل ما فعلت لكن لم يعمل معي الأمر, كتبت الكود في موقع codepen, و حاولت تجربة الأمر فوجدته يعمل!
المشكلة إذن ليس في الكود الذي كتبته لي و إنما في مكان آخر, فبرأيك أين قد تقع المشكلة ؟

حاول في المتصفح، النقر على ctrl + F5 لكي يتم إعادة تحميل ملف التنسيقات و حذف الملفات المؤقتة.. لتظهر التنسيقات الجديدة، حاول ذلك وأخبرني بالنتيجة

بتاريخ منذ ساعة مضت قال أسامة زيادة:

هل يمكنك إرفاق ملفات المشروع ؟ حتى أستطيع النظر إليها وفهم أين المشكلة بالتحديد لديك  

ملاحظات :

ملف css موجود في ملف إسمه css
يحتوي ملف css أيضا على ملف normalize و ملف all.min (ملف fontawesome)
 

index.html

master.css

بتاريخ 59 دقائق مضت قال Wael Aljamal:

حاول في المتصفح، النقر على ctrl + F5 لكي يتم إعادة تحميل ملف التنسيقات و حذف الملفات المؤقتة.. لتظهر التنسيقات الجديدة، حاول ذلك وأخبرني بالنتيجة

لم يعمل الأمر

بتاريخ 3 ساعات قال الشخص المصمم:

 

ملاحظات :

ملف css موجود في ملف إسمه css
يحتوي ملف css أيضا على ملف normalize و ملف all.min (ملف fontawesome)
 

index.html

master.css

لم يعمل الأمر

تأكد من حفظ الملفات بعد التعديل، كما تأكد من تصفح الملفات المعدلة في المتصفح، ربما لديك نسختين منهم..

بتاريخ 5 ساعات قال Wael Aljamal:

تأكد من حفظ الملفات بعد التعديل، كما تأكد من تصفح الملفات المعدلة في المتصفح، ربما لديك نسختين منهم..

المشكلة ليست هنا

بتاريخ 8 ساعات قال الشخص المصمم:

المشكلة ليست هنا

كيف يمكن أن تعمل الصفحة على الموقع ولا تعمل لديك على حاسوبك؟ طالما حذفنا الملفات المؤقتة يفترض أن تظهر بشكل صحيح

أرجو إضافة توضيحات بشأن المشكلة 

بتاريخ 19 ساعات قال الشخص المصمم:

إنها مشكلة غريبة حقا, قمت بعمل ما فعلت لكن لم يعمل معي الأمر, كتبت الكود في موقع codepen, و حاولت تجربة الأمر فوجدته يعمل!
المشكلة إذن ليس في الكود الذي كتبته لي و إنما في مكان آخر, فبرأيك أين قد تقع المشكلة ؟

حسب تجربتي على عدة متصفحات، لاحظت أن هذه مشكلة تظهر على متصفح Google Chrome ، لكن على متصفح Firefox ليس هناك أي مشاكل ، يتم تنفيذ الكود عند الوصول لحجم الشاشة الذي قمت بوضعه . ربما تكون المشكلة من متصفح Google Chrome نفسه ، قم بالتجربة على متصفح آخر 

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

حسب تجربتي على عدة متصفحات، لاحظت أن هذه مشكلة تظهر على متصفح Google Chrome ، لكن على متصفح Firefox ليس هناك أي مشاكل ، يتم تنفيذ الكود عند الوصول لحجم الشاشة الذي قمت بوضعه . ربما تكون المشكلة من متصفح Google Chrome نفسه ، قم بالتجربة على متصفح آخر 

جربت الأمر في متصفح  edge و توجد نفس المشكلة به, هل المشكلة لها علاقة بالتوافقية مع المتصفحات, هل علي إستخدام أكواد vendors prefixes مثلا

بتاريخ 28 دقائق مضت قال Wael Aljamal:

كيف يمكن أن تعمل الصفحة على الموقع ولا تعمل لديك على حاسوبك؟ طالما حذفنا الملفات المؤقتة يفترض أن تظهر بشكل صحيح

أرجو إضافة توضيحات بشأن المشكلة 

أنشأت تصميما آخر به نفس المشكلة يمكنك رؤيته هنا :
https://github.com/Mostafa-100/Lean-Template

بتاريخ 4 دقائق مضت قال الشخص المصمم:

جربت الأمر في متصفح  edge و توجد نفس المشكلة به, هل المشكلة لها علاقة بالتوافقية مع المتصفحات, هل علي إستخدام أكواد vendors prefixes مثلا

لا يوجد مشاكل لديك ، كل ما عليك فعله هو عندما تريد تجربة Responsive للموقع لا تصغر المتصفح يفضل الآتي عمل فحص للعنصر والتجربة على أحجام الشاشات الموضوعة في قائمة الفحص أو وضع الحجم المناسب لديك ، الشكل الموضح بالصورة 

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

لا يوجد مشاكل لديك ، كل ما عليك فعله هو عندما تريد تجربة Responsive للموقع لا تصغر المتصفح يفضل الآتي عمل فحص للعنصر والتجربة على أحجام الشاشات الموضوعة في قائمة الفحص أو وضع الحجم المناسب لديك ، الشكل الموضح بالصورة 

شكرا لك على هذه النصيحة, المشكلة حقا توجد في المتصفح لقد قمت بتجربة الـ responsive بالطريقة التي ذكرتها و لاحظت أن الأمر يعمل, شكرا جزيلا مرة أخرى

بتاريخ 49 دقائق مضت قال Wael Aljamal:

كيف يمكن أن تعمل الصفحة على الموقع ولا تعمل لديك على حاسوبك؟ طالما حذفنا الملفات المؤقتة يفترض أن تظهر بشكل صحيح

أرجو إضافة توضيحات بشأن المشكلة 

شكرا جزيلا لك أيضا, المشكلة موجودة في المتصفح ليس الكود قمت بتجربة ال responsive بطريقة أخرى في المتصفح و عمل معي الأمر

ملاحظة عامة، عند استخدام media query تأكد من ترتيب أبعاد الصفحة بشكل صحيح، لأنه كما تعلم آخر تنسيق ل CSS سوف يتم تطبيقه، فإذا كان لديك تنسيقين تريد تطبيقهما على البعدين (500 وأقل) و (600 و أقل) نضع 600 قبل 500 لأنها تشملها

هكذا 550 سيطبق مع 600 أما 450 مع 500 .. 

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

@media only screen and (max-width: 500px){
    body{ background:red;}
}

لو وضعناهم بالعكس، 500 ثم 600 لتم تنفيذ تنسيق 600 وأقل على 450 وتخرب التنسيق

• max-width الكبير أولا
• min-width الصغير أولا

مقالة مفيدة من مقالات أكاديمية حسوب: