السلام عليكم ورحمة الله تعالى و براكته ,في هذا الدرس الجديد2 من حلول لطريقة جعل قالب متوافق مع جميع الأجهزة و الشاشات سنتطرق الى الحل الأكثر استعمالا و هو عبر ال Media
queries هذه التقنية تتم عبر ال css3 و مهمتها عمل تصميم متوافق Responsive 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 queriesو كماترى هناك max-width في كل كود و هو يمثل عرض الشاشة و كل كود مخصص لشاشة جهاز معين مثلا Iphone - Mobiles-tablets-Small 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 ;}
}
---------------------------------------------------------------------------------------------------------
كما ترى نطبق على الهيدر و مكان التدوينات و القائمة الجانبية نفس ما قمت به أنا بعد ذالك في خطوة التدوينات و السايدبار سنقوم بعملية رياضية لكي نجد النسبة المئوية لعرض مكان التدوينات و مكان القائمة الجانبية هي سنقوم بأخذ عرض مكان التدوينات مثلا 622 px - و نقوم بضربه في 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 و نأخذ عرض كل جهاز و نكتبه في الفراغ الذي في الصورة و سترى الموقع يتجاوب مع العرض.
لن تعمل الأكواد و يصبح القالب متوافق الى بعد تغيير القيم التي يجب تغييرها و الايديهات كذالك.
لا تنسى تعليق
ليست هناك تعليقات:
إرسال تعليق