قم بالبحث عن </head>
بعد ذلك قم باضافة الكود التالي فوقه مباشرتا
<meta content='width=device-width, initial-scale=1.0, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes' name='viewport'/>
ثانيا التقنية الاهم queries هذه التقنية تتم عبر ال css3 و مهمتها عمل تصميم متوافق Respansive web design ,
قم باضافة الكود التالي داخل اكواد الـ css
@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 و نأخذ عرض كل جهاز و نكتبه في الفراغ الذي في الصورة و سترى الموقع يتجاوب مع العرض
انتهي الشرح وملحوظه هذا الموضوع منقول من مدونة علي نائل
0 التعليقات :
إرسال تعليق