التخطي إلى المحتوى الرئيسي

طريقة جعل قالب متوافق مع جميع الشاشات { الحل 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 }



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

تعليقات

  1. شكرا لك

    ردحذف
  2. صديقي هذا الشرح احتاجه جدا لكنتي لم افهمه جيدا.
    ارجوا ان تاتيني عالخاص في الفيسبوك.
    https://www.facebook.com/oussama.chinoui.522/
    واخبرني انك انت.
    انا في الانتظار حبيبي ♥

    ردحذف

إرسال تعليق

المشاركات الشائعة من هذه المدونة

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

ان اضافة أداة المشاركة عبر المواقع الاجتماعية تحت كل تدوينة أمر مهم جدا فقد يجلب لك مزيد من الزوار فعندما يضغط زائر على نشر التدوينة فستنشر في حسابه و باتالي يأتي اليك زوار اضافة اداة المشاركه عبر المواقع الاجتماعيه  انها أداة جميلة تحتوي على زر النشر في الفيسبوك و التويتر و جوجل بلس لاضافة الأداة HTML   من  لوحة التحكم ادهب الى   قالب ثم  تحرير   خذ نسخه احتياطيه لـقالب المدونه قبل إجراء أية تغييرات   قم بالبحث عن الكود التالي   والصق الكود التالي بعده قبله تماما

كيف تستفيد من أداة Inspect Element في جوجل كروم

Inspect Element هي أداة توجد في متصفح جوجل كروم وهي أداة وضعت خصيصا لمطوري الويب أو web devloper فيها العديد من المميزات لمساعدة مطور الويب في عمله و لهدا سأريك في هدا الدرس أهم الاستعمالات لأداة Inspect Element  كيف تستفيد من أداة Inspect Element في جوجل كروم  نافذة Elements من هده القائمة يمكنك مشاهدة جميع عناصر الصفحة و أكواد ال css الخاصة بكل عنصر ,ويمكنك التعديل عليها حسب ذوقك ادا كنت تتقن ال HTML و CSS  نافذة Sources هده النافذة تمكنك من مشاهدة مصادر موقعك التي تتمثل في السكريبتات  و كل ما يتصل به موقعك نافذة Resources هده النافذة تقوم باضهار موارد موقعك و أقصد بموارد هي الصور و السكريبتات و ال Stylesheets فعبر فتح ملف Frames يمكنك أن تشاهد الصور والسكريبتات و ال Stylesheets الخاصة بأي موقع أو مدونة  نافذة console  وهي وحدة تحكم المدونة أو الموقع يمكنك القاء أوامر للموقع أعطيك مثال على ذالك تلك الخدع التي تراها في الفيسبوك عن طريقة اختراق أي حساب أو فتح كامرا أي شخص ... فتلك الخدع تعمل بواسطة console وتلقي أوامر

كود Html تكبير الصورة بمرور الماوس عليها

السلام عليكم و رحمة الله وبراكته HTML اليوم أردت أن أقدم لكم اضافة لمدوناتكم و هي عبارة عن كود و هدا الكود يقوم بتكبير صورة بطريقة جميلة وبمجرد مرور الماوس عليها معاينة مرر الماوس على هده الصورة  تكبير الصورة بمرور الماوس عليها Htmlكود   تكبير الصورة بمرور الماوس عليها < image src = "رابط الصورة"  onmouseover = "this.height='300';this.width='300'"   onmouseout = "this.height='200';this.width='200'"  height = "200"  width = "200" > الكلمات الدلالية HTML الماوس صورة