كيف تجعل قالبك متوافق مع جميع الاجهزة ؟ ( تلزم خبرة في التكويد )

لعل التوفر على قالب متوافق Responsive Design اصبح من المستحيلات حاليا ، و ذلك راجع الى ذوق مستعمل القالب... فاما ان يكون الشكل الذي يظهر القالب به على الاجهزة الاخرى ليس جميلا ، او انه لا يتناسب مع شكل و حجم الجهاز و بالتالي يظهر بصورة اكبر من اللازم او اصغر من اللازم . اذن في هذه التدوينة سأريك كيف تجعل قالبك متوافق كما يحلو لك !

ملاحظة : يجب عليك ان تكون لديك خبرة  في التكويد لفهم الدرس

اول شئ عليك القيام به هو التأكد من ان قالبك لا يوفر على توافق سابق ، اي انه لا يتوافق مع اجهزة بحسب اكواد سابقة و التي وجب عليك حذفها عن طريق البحث في كود عن media@ ثم القيام بحذفها كلها من المعقوفة الاولى الى الثانية و تأكد من عدم حذف اخرى لا تخص ذلك الكود !

اذن بعد ازالة كل الاكواد ابحث عن "b:skin><![CDATA[" ثم ضع امامها هذه الاكواد :

@media screen and (max-width:960px) {

}

@media only screen and (max-width:768px){

}

@media (min-width:768px) and (max-width:979px) {

}

@media (max-width:767px) {

}

@media only screen and (min-width:640px){

}

@media only screen and (max-width:640px){

}

@media only screen and (min-width:640px){

}

@media only screen and (max-width:480px){

}

@media screen and (max-width:320px){

 

بعد ذلك اذهب الى مدونتك من خلال متصفح غوغل كروم ، ثم اضغط على زر الفأرة الايمن ثم على "Inspect Elements" ، ستجد ايقونة هاتف صغيرة على الجانب الايسر للقائمة التي ستظهر لك اضغط عليه .

و هنا يأتي الجزء الذي يجب فيه العمل كثيرا و هنا ستنفعك خبرتك في التكويد ، حيث انه يجب عليك اخذ كل طول من الاطوال التي توجد في الاكواد السابقة التي الصقناها ، و من ثم كتابة اكواد داخل المعقوفات الخاصة بها بحيث يكون طول كل من الاقسام المشكلة للمدونة ( الهيدر ، الناڤبار ، السايدبار ، الكونتن و الفوتر ) في طوله الملائم لعرض الشاشة ، بحيث انه عندما تشغل المدونة بكافة الاطوال يتغير عرض القالب مع الطول ، و هذا هو مبدئ العمل !

ان كان هناك اي مشكل في فهم المبدئ المرجوا مراستي في تعليق