طريقة جعل قالب متوافق مع جميع الشاشات { الحل 3 }

طريقة جعل قالب متوافق مع جميع الشاشات

السلام عليكم ورحمة الله تعالى و براكته ,في هذا الدرس الجديد من حلول لطريقة جعل قالب متوافق مع جميع الأجهزة و الشاشات سنتطرق الى الحل الأكثر استعمالا و هو عبر ال Media queries هذه التقنية تتم عبر ال css3 و مهمتها عمل تصميم متوافق Respansive web design ,

مثال

في المثال أعلاه يوجد تصميم بسيط متوافق مع جميع الشاشات , جرب تصغير نافذة المتصفح عند فتح المثال لترى كيف يتجاوب التصميم مع  عرض  نافذة المتصفح و نفس الشيئ سيفعله مع الشاشات الأخرى .
أولا , بما أن الMedia Queries تقنية من تقنيات css3 فعلينا كتابة أكوادها في مكان الcss سواء بين وسمي style أو b:skin في البلوجر .

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

/* CSS FOR NETBOOK AND DESKTOP ------------*/

}

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

/* CSS FOR TABLETS ------------*/

}

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

/* CSS FOR SMALL TABLETS ------------*/

}

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

/* CSS FOR IPHONE ------------*/

}

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

/* CSS FOR MOBILES ------------*/

}

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

/* CSS FOR SMALL OLD MOBILES ------------*/

}

كما ترى فوق هذه هي أكواد ال Media quries و كماترى هناك max-width في كل كود و هو يمثل عرض الشاشة و كل كود مخصص لشاشة جهاز معين مثلا Iphone - Mobiles-tablets-Smal tablets-old mobiles
و يمكنك تخصيص لكل شاشة أحجام مناسبة لها عبر كتابة أكواد ال css في مكان النص الأحمر فوق  (تحذف النص و مكانه تبدء بكتابة الأكواد )

طريقة التعامل و كتابة الأكواد 
التصاميم العادية لقوالب بلوجر هي عبارة عن 'هيدر - مكان التدوينات و القائمة الجانبية - تدوينات - قائمة جانبية - فوتر 

فأولا سنعمل على الهيدر ثم  " مكان التدوينات و القائمة الجانبية "   ثم التدوينات ثم  القائمة الجانبية ثم الفوتر .

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

#header {width:100%; }
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;} 

}

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

#header {width:100%; }
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}  

}

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

#header {width:100%; }
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { width:35.15%;}

}

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

#header {width:100%; }
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { display:none;}
.post {width: xxxx ;}

}

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

#header {width:100%; }
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { display:none;}
.post{  width:xxxx ;}

}

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

#header {width:100%; }
#content-wrapper {width:100%; }
#main { width:62.82;%}
#sidebar { display:none;}
.post { width: xxxx ;}

}

كما ترى نطبق على الهيدر و مكان التدوينات و القائمة الجانبية  نفس ما قمت به أنا بعد ذالك في خطوة التدوينات و السايدبار سنقوم بعملية رياضية  لكي نجد النسبة المئوية لعرض مكان التدوينات و مكان القائمة الجانبية  هي سنقوم بأخذ عرض مكان التدوينات مثلا 622px - و نقوم بضربه في 100 ثم قسمته على عرض مكان التدوينات و القائمة الجانبية صورة للتوضيح أكثر

بعد ذالك نقوم باضافة العرض الخاص بالقائمة الجانبية و التدوينات في أكواد ال Media queries كما فعلت أنا فوق في الأكواد .
كما تلاحظ في الشاشات ذات العرض 640px - 480px -  320px هناك تغيير , هذا التغيير قمنا فيه بجعل القائمة الجانبية تختفي
ليكون القالب أكثر رحة على الهاتف , حتى أنه  سيضهر نصف القائمة  لم لم نقم باخفائها , و هناك احتمال اخر و هو أن نجعلها تحت التدوينات و يتم ذالك عبر حذف overflow hidden من كود القائمة الجانبية و اضافة كود ;float none في كود القائمة الذي في أكواد ال Media Queries ( يفضل اخفاء القائمة  ) و قمت أيضا بالتعديل على المشاركة أو ال POST لكي تظهر جيدا
و بهذه الطريقة تقوم أنت بالتعديل على أي تصميم أو اضافة بلوجر.....ألخ...

الايديهات التي يجب عليك تغييرها

header
content-wrapper
main
sidebar

أما ايدي post فهو ايدي تلقائي في كل مدونات بلوجر ليس عليك تغييره . أما الايديهات التي فوق فهي يجب تغييرها بالايديهات الخاصة بك و تستطيع ايجادها عبر أداة فحص العنصر بسهولة , اذا لم تستطيعو ايجادها ضعو لي مدوناتكم في تعليق لكي أجدها لكم
و عليك أيضا تغيير القيم في ال main و sidebar  و post حسب العرض الذي يوجد في قالبك . و تغيير بعض التفاصيل الأخرى السهلة في تعديلها و التي لا تتطلب وقت .

الان للتأكد من توافق القالب عليك بالضغط على يمين الفأرة ثم فحص العنصرأو inspect element بعد ذالك نقوم بسحب قائمة في الأسفل

بعد ذالك نذهب الى تبويب Emulation و نذهب الى أكواد Media Queries و نأخذ عرض كل جهاز و نكتبه في الفراغ الذي في الصورة و سترى الموقع يتجاوب مع العرض

أي استفسار , خطا , غلط , سؤال , تصحيح يرجى وضعه في تعليق شكرا  .

لن تعمل الأكواد و يصبح القالب متوافق الى بعد تغيير القيم التي يجب تغييرها و الايديهات كذالك

طريقة جعل قالب متوافق مع جميع الشاشات { الحل 1 }

طريقة جعل قالب متوافق مع جميع الشاشات { الحل 2 }



جعل موقع متوافق مع جميع الأجهزة
جعل قالب متوافق مع جميع الأجهزة
أساسيات جعل قالب بلوجر متجاوب مع جميع الأجهزة