الدرس: تنظيف الكود وتوافقية الموبايل ▼
في الدرس قام الاخ محمد باستبدال width: 960px; بال max-width: 960px;
انا في الدروس الي قبلها عندما وصلنا لجزء الmain قمت باستخدام النسبة المئوية width: 80%;
حتى عندما اقوم بتصغير المتصفح تتناسب الصور مع الحجم الخاص بالمتصفح
الي لاحظتة انو انا ومحمد وصلنا لنفس النتيجة وهي التوافقية مع حجم الشاشة او المتصفح
هل يعتبر الكود الي استخدمتة انا خطأ ام لا مشكلة فيه ومن الافضل استخدم max-width او النسبة المئوية %
في الحقيقة هناك فرق بين أن تقوم بتحديد أقصى عرض max-width بقيمة 960 وان تقوم بجعل العرض width يساوي 80% من عرض الأب.
في حالة اقصى عرض لن يتعدى عرض العنصر اكثر من 960px مهما كان عرض الأب او نستطيع نقول نافذة المتصفح في حالتنا. اما في حالة الـ 80% فقد يتعدى العنصر عرض الـ 960px اذا كانت الشاشة التي يتم عرض الموقع عليها كبيرة ففي الأخير العرض يتم إحتسابة بقيمة نسبية من عرض الشاشة.
حتى عندما اقوم بتصغير المتصفح تتناسب الصور مع الحجم الخاص بالمتصفح
قيامك بإعطاء الصورة عرض بقيمة 44% يجعل العرض نسبي لنافذة المتصفح فدائماً ستأخذ عرض بمقدار 44% من الشاشة مهما صغرت أو كبرت. لكن ستلاحظ ان ذلك ينعكس على الصورة بان حجمها يكون صغير جداً في حال ما كانت الشاشة صغيرة وذلك لانها تأخذ هذه النسبة فقط من الشاشة.
كالتالي:
فما الحل اذا ما اردت ان تأخذ الصورة عرض أكبر كالتالي:
فكر بهذا الشئ وكيف ممكن تحقيقة واخبرني.
الي لاحظتة انو انا ومحمد وصلنا لنفس النتيجة وهي التوافقية مع حجم الشاشة او المتصفح
صحيح قد يبدوا لك أنه لا يوجد فرق كبير لأنك وصلت للنتيجة بطريقة مختلفة. لكن فكما قلنا سابقاً كل شخص لدية طريقة تفكير مختلفة وفي النهاية النتيجة قد تكون مطابقة او مشابهه بقدر كبير.
و أعجبني محاولتك للوصول للنتيجة بطريقة أخرى فأحييك على ذلك.
هل يعتبر الكود الي استخدمتة انا خطأ ام لا مشكلة فيه
لا أستطيع أن اقول لك ان ما قمت به خطأ فأنت قمت بأخذ التصميم و الوصول لما يطابقة، لكن هل ما قمت به هو الطريقة الأنسب هذا هو السؤال الذي عليك طرحة. وجواب هذا السؤال ستعرفة بنفسك مع تعمقنا في المجال وخصوصاً في دروس الـ Responsive web pages.
فهذا النوع من الأسئلة خير مجيب عليه هو الممارسة والتجربة وكذلك محاولة الوصول للنتيجة بطرق مختلفة وتحليل الإيجابيات والسلبيات في كل طريقة وهذا ما تقوم به انت الأن بالفعل.
ومن الافضل استخدم max-width او النسبة المئوية %
أريد منك الا تقارن بين max-width وبين النسبة المئوية فأنت تقارن خاصية بوحدة قياس، فبإمكانك إستخدام النسبة المئوية مع الخاصية max-width.
لكن إذا ما قصدت هو مقارنه max-width مع الخاصية width في هذه الحالة تستطيع تعرف من الأفضل حسب متطلبات المشروع.
فعلى سبيل المثال في الصفحة التي نعمل عليها
من الواضح ان من المتطلبات ان لا يزيد عرض الصفحة عن قيمة 960px لانه يوجد أي فائدة من ان تكون العناصر اعرض من هذه القيمة.
إعطاء العنصر الخاصية max-width حيث انني سأضمن الشرطين:
1- عدم تعدي العناصر للعرض المحدد.
2- في نفس الوقت مازلت أستطيع الحصول على صفحة تجاوبية مع الشاشات الصغيرة.
في الجانب الأخر الخاصية width اذا قمت بإعطائها القيمة 960px فسأضمن الشرط التالي:
1- عدم تعدي العناصر للعرض المحدد.
لكني لن اضمن الشرط الثاني فإستخدامي لقيمة ثابته مع الخاصية width تعني بأن العناصر لن تقبل عرض أقل ما سيؤثر على تجاوبية الصفحة مع الشاشات الصغيرة.
اما إستخدام الخاصية width مع قيمة نسبية بقيمة 80% فيضمن لي التالي:
1- عدم تعدي العناصر للعرض 80% من عرض الشاشة مهما كان عرضها (في هذه الحالة لا نعلم ابعاد الشاشة وقد تكون هذه الـ 80% أكبر من 960px اذا كانت الشاشة كبيرة).
2- في نفس الوقت مازلت أستطيع الحصول على صفحة تجاوبية مع الشاشات الصغيرة.
أرجوا ان تكون أتضحت لك الفكرة، اذا مازال هناك أي التباس أخبرني
الصراحة ماعرف كيف اشكرك على هذا التوضيح الرهيب شكراً من القلب 
أرجوا ان تكون أتضحت لك الفكرة، اذا مازال هناك أي التباس أخبرني
اكيد اتضحت الفكرة وزيادة
بعد ماقريت ردك صار عندي الامكانية اعرف من الافضل وايش الفرق بينهم وكل هاي الامور تتحدد من خلال المشروع ومتطلبات
وفهمت انو الmax-width تخدمني اكثر لانو رح احدد من خلالها كم اكبر حجم عكس الwidth % ممكن تأثر سلبيا لو كنت مستخدم صورة مثلا وكانت شاشة العرض كبيرة فراح تكبر الصورة لاكبر من حجمها الطبيعي وتقل جودتهة او تكون غير واضحة
اشكرك مرة ثانية على الرد الجميل 
عليك نور، بالضبط 
لا شكر على واجب عزيزي محمد 
