مرحبا

لكي تكون واجهة الموقع ملائمة لجميع أبعاد الشاشات ينبغي الإطلاع أولا على بعض المبادء و التوصيفات في لغة الأنماط الإنسيابية css
و اللتي ستساعدنا في تصميم الواجهة السلسة و المتوافقة مع جميع المقاسات


I - مبادئ

1 ) الأولوية

في css  ( على غرار معظم اللغات البرمجية ) يتم إعتبار الصحيح هو آخر ما تم إدراجه و بالتالي المدخلات أو التوصيفات السابقة يتم تجاهلها

مثلا إدا قمت بتحديد عرض عنصر إلى 300px تم قمت بإعادة كتابة قيمة أخرى للعرض بعدها سيتم تجاهل القيمة الأولى و إعتماد آخر قيمة تم إدخالها
مثال:


في هده الحالة سيتجاهل المتصفح القيمة 580 و يعتمد 200 اللتي جائت بعدها


------
إدا تم تعريف العنصر مجددا فلن تتأتر المدخلات الغير المحدثة .



في المثال أعلاه تم إستبعاد قيمة width السابقة بسبب وجود قيمة جديدة في التعريف الجديدة
بينما تم الإبقاء على قيمة border بسبب عدم توفر التعريف الجديد على قيمة أخرى


2 ) العمليات الحسابية

في الأنماط الإنسيابية يمكن إجراء بعض العمليات الحسابية للوصول إلى القيمة المثالية لعرض أو إرتفاع العنصر

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

width: calc(100% - 100px);

3 ) القيمة القصوى / الدنيا

يمكن تحديد قيمة قصوى أو دنيا للعنصر بحيت لا يمكن تجاوزها تحث أي ظرف
مثال :
سنقوم بإعطاء حدود لعرض الصورة بحيث لا تزيد عن 80% من عرض الشاشة لكن في المقابل ستأخد الصورة عرضها الأصلي إدا كان يشكل أقل من 80% من عرض الشاشة

width : 500px;
max-width : 80%;

--------------------------------------------------

II - الشرح 

يمكن إنشاء مجموعة توصفات تشتغل فقط في حالات معينة . كأن يكون عرض الشاشة / نافدة التصفح أقل من 440px


في المثال التالي ستأخد الخلفية اللون الأصفر إدا كان عرض شاشة التصفح 420px أو أقل

@media all and (max-width:420px) {
body{

    background:#ef8;

  
}
}

غير دلك سيتم إعتماد قيمة سابقة ( إن وجدت ) كخلفية للصفحة








ملاحظة : قم بتحجيم نافدة المتصفح لترى التغيير مباشرة دون تحديث الصفحة

• يمكن إستخدام min-width بدلا من max-width للحصول على نتيجة عكسية ( إدا كان عرض شاشة التصفح أكبر من 420px )
• يجب إدراج القيم الأولية مسبقا قبل إدراج @media اللدي يتضمن توصيفات الحالة المخصصة 
• يمكن إدراج تخصيصات لعدة مقاسات من الشاشة 

III - أمثلة عملية

1 ) المحاداة 

محاداة المحتوى داخل الخلية مهم جدا في إظهار تصميم الموقع ملائما لأبعاد الشاشة / المتصفح
و بالتالي سيتعين عليك تقليل قيمة المحاداة في العناصر اللتي تأخد وضعا أفقيا مع بعضها البعض عن طريق توصيف padding للمحاداة الداخلية و margin للمحاداة الخارجية





2 ) نمط / طريقة العرض

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

display: inline-block;

 display: table;

تحميل مثال حي

http://www.mediafire.com/file/6v220l82gq8e505/screenwidth_-_wahj.cf.rar/file