مصطفى اوريك نشر 29 سبتمبر 2021 أرسل تقرير نشر 29 سبتمبر 2021 السلام عليكم. لدي مشكلة -هذا إن كانت مشكلة- في تحقيق التجاوبية لصفحتي. عندما يصل عرض الشاشة لـ 343px و أقل : سترون ظهور فراغ أبيض في يمين الصفحة فما سبب المشكلة ؟ رابط الصفحة للمعاينة : https://mostafa-100.github.io/Responsive-Beginner-JS-Project/ رابط الأكواد : https://github.com/Mostafa-100/Responsive-Beginner-JS-Project 2 اقتباس
0 شرف الدين حفني نشر 29 سبتمبر 2021 أرسل تقرير نشر 29 سبتمبر 2021 هذا الفراغ الأبيض يحدث بسبب أن خصاصية الoverflow قيمتها الإفتراضية للعناصر visible مما يسبب في حالتك عند الشاشات الصغيرة هذا الفراغ الأبيض , قم بوضع قيمة الoverflow للclass المُسمى intro_container ب auto كما في الشفرة التالية .intro_container{ overflow:auto; } وستجد الموقع يعمل دون مشاكل اقتباس
0 مصطفى اوريك نشر 29 سبتمبر 2021 الكاتب أرسل تقرير نشر 29 سبتمبر 2021 بتاريخ On 29/9/2021 at 15:08 قال شرف الدين2: قم بوضع قيمة الoverflow للclass المُسمى intro_container ب auto أظهر المزيد إختفى ذلك الجزء الأبيض, على الأقل لا يظهر إلا في العرض 186px إلى تحت ملاحظة : قمت بوضع الخاصية في ال class المسمى intro و ليس intro__container, لم يعمل معي الأمر عندما وضعت الخاصية في هذا الأخير اقتباس
0 Adnane Kadri نشر 29 سبتمبر 2021 أرسل تقرير نشر 29 سبتمبر 2021 يبدوا أن العنصر body لا يأخذ كامل عرض الصفحة في الشاشات الأقل من 343 بكسل . إعطاء العنصر body القيمة fit-content في خاصية العرض الأدنى للعنصر min-width قام بحل المشكل لدي: body{ min-width: fit-content; } توثيق الخاصية : هنا . اقتباس
0 شرف الدين حفني نشر 29 سبتمبر 2021 أرسل تقرير نشر 29 سبتمبر 2021 قم بوضع تلك التنسيقات وستختفي المساحة البيضاء أيا كان مقاس الشاشة html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; } اقتباس
0 مصطفى اوريك نشر 29 سبتمبر 2021 الكاتب أرسل تقرير نشر 29 سبتمبر 2021 بتاريخ On 29/9/2021 at 15:26 قال Adnane Kadri: إعطاء العنصر body القيمة fit-content في خاصية العرض الأدنى للعنصر min-width قام بحل المشكل لدي: أظهر المزيد جربته و هو فعال حقا, لكن لماذا العنصر <body> لا يأخذ كامل عرض الصفحة في القياسات التي ذكرتها ؟ بتاريخ On 29/9/2021 at 15:29 قال شرف الدين2: قم بوضع تلك التنسيقات وستختفي المساحة البيضاء أيا كان مقاس الشاشة أظهر المزيد شكرا عمل هذا أيضا, لكن إذا قمت بتصغير عرض الشاشة يختفي جزء من مكونات الصفحة, فماذا أفعل لكي لا يحدث هذا ؟ 2 اقتباس
0 شرف الدين حفني نشر 29 سبتمبر 2021 أرسل تقرير نشر 29 سبتمبر 2021 بتاريخ On 29/9/2021 at 15:31 قال مصطفى اوريك: جربته و هو فعال حقا, لكن لماذا العنصر <body> لا يأخذ كامل عرض الصفحة في القياسات التي ذكرتها ؟ شكرا عمل هذا أيضا, لكن إذا قمت بتصغير عرض الشاشة يختفي جزء من مكونات الصفحة, فماذا أفعل لكي لا يحدث هذا ؟ أظهر المزيد المعذرة, قم بتغيير خاصية الoverlow لتصبح scroll بدلاً من hidden , وستﻻحظ بعدها ظهور مؤشر يمكنك من عرض الأجزاء المخفية اقتباس
0 مصطفى اوريك نشر 29 سبتمبر 2021 الكاتب أرسل تقرير نشر 29 سبتمبر 2021 بتاريخ On 29/9/2021 at 15:36 قال شرف الدين2: قم بتغيير خاصية الoverlow لتصبح scroll بدلاً من hidden , وستﻻحظ بعدها ظهور مؤشر يمكنك من عرض الأجزاء المخفية أظهر المزيد لم تفهم قصدي أريد أن تظهر مكونات الصفحة بشكل عادي و بدون إستعمال scroll, فهل هذا ممكن ؟ 1 اقتباس
0 شرف الدين حفني نشر 29 سبتمبر 2021 أرسل تقرير نشر 29 سبتمبر 2021 بتاريخ On 29/9/2021 at 15:40 قال مصطفى اوريك: لم تفهم قصدي أريد أن تظهر مكونات الصفحة بشكل عادي و بدون إستعمال scroll, فهل هذا ممكن ؟ أظهر المزيد يمكنك عبر تصغير الخط وتعديل مكونات الصفحة بإستخدام الmedia query لتناسب المقاسات الصغيرة 1 اقتباس
0 Adnane Kadri نشر 29 سبتمبر 2021 أرسل تقرير نشر 29 سبتمبر 2021 بتاريخ On 29/9/2021 at 15:31 قال مصطفى اوريك: جربته و هو فعال حقا, لكن لماذا العنصر <body> لا يأخذ كامل عرض الصفحة في القياسات التي ذكرتها ؟ أظهر المزيد لاحظ أن عنصر الفقرة التالية : <p>Unlimited Possibilities</p> يمتد على عرض أكثر من عرض الحاوي له , و ذلك حتى يحافظ على التخطيط الشبكي grid layout للعنصر الحاوي له بالصنف التالي : intro__container . يسبب تمدده على عرض أكبر من عرض الصفحة امتلاكه للخاصية التالية : .intro p:last-of-type { font-size: 3.8rem; } فلو تقم بتقليل حجم الخط الذي يمتلكه ستلاحظ عودة الصفحة لحجمها الطبيعي , و ذلك لعدم إمتداد الحاوي الشبكي على عرض أكبر من عرض الصفحة . و ليكن مثلا حجم الخط 2.1rem . جعل أحجام الخطوط تجاوبية يجب أخذه بالإعتبار أيضا , و لذلك أفضل تقليل حجم النص لعنصر الفقرة عوضا عن إعطاء العنصر body القيمة fit-content للخاصية min-width . فهاته القيمة ليست مدعومة بعد من قبل كامل متصفحات الويب . 1 اقتباس
السؤال
مصطفى اوريك
السلام عليكم.
لدي مشكلة -هذا إن كانت مشكلة- في تحقيق التجاوبية لصفحتي.
عندما يصل عرض الشاشة لـ 343px و أقل : سترون ظهور فراغ أبيض في يمين الصفحة
فما سبب المشكلة ؟
رابط الصفحة للمعاينة : https://mostafa-100.github.io/Responsive-Beginner-JS-Project/
رابط الأكواد : https://github.com/Mostafa-100/Responsive-Beginner-JS-Project
9 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.