[شرح] إنشاء قالب بلوجر متجاوب

بسم الله الرحمن الرحيم في هذه التدوينة سأشرع في شرح إنشاء قالب متجاوب مع جميع الشاشات والأجهزة ,لنبدأ بسم الله.

ما هو القالب المتجاوب؟

هي ميزة تسمح للتصميم التجاوب مع جميع أحجام الشاشات والأجهزة المختلفة كالهواتف والأجهزة اللوحية..إلخ حتي لا يواجه المستخدم أية مشاكل أثناء التصفح للموقع أو المدونة.

لذا عليك الاهتمام بجعل القالب متجاوب ,فالمصمم الكسول لا يهتم بالتجاوب بالنسبة للمتصفح فتجد في مدونة المهارة الصفحات فيها متجاوبة لذا عليك الاهتمام بذلك الأمر عند التصميم ,فمقاس شاشتك ليس كمقاس شاشتي.

المتطلبات

قبل أن نبدأ هناك العديد من المتطلبات التي يجب أن تهتم بها لتتمكن من صنع قالب متجاوب.

CSS

يجب أن يكود لديك العديد من المهارات في لغة برمجة الـ CSS ,فإذا كنت ماهراً فيها فهذا أمر جيد ,أما إذا لم تكن محترف...فعليك بتطوير نفسك.

هيكل القالب:

هل تعرف بنية قالبك؟ فإذا كان القالب من صنعك بهذا جيد ,أما إذا كانت إحابتك بلا ,فيجب عليك معرفة هيكل قالبك تمام المعرفة كالأقسام والمحتويات والهيدر مغلق أم لا..إلخ ويجب عليك أيضاً معرفة الـ Class و Id لكل عنصر ,ففي هذا الأمر سنلعب علي أكواد الـ Html.

إضافة جوجل كروم:

متصفح جوجل كروم يتيح العديد من المزايا لمطورين الويب بصورة كبيرة لذا عليك استغلال هذا الأمر , واستخدام إضافة: Resize Window حيث تتيح لك تغير مقاسات الشاشة لمقاسات أجهزة أخري "للإختبار".

ابدأ في العمل.
أكواد الميتا تاج:

اذهب إلي بلوجر > التصميم > احفظ نسخة من القالب > تحرير القالب

ابحث عن <head> ثم اضف الكود التالي تحته

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

Media Queries:

لنستخدم أكواد "Media Queries" لأحجام الشاشة المختلفة.

سنضع هذه الأكواد فوق ]]></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 ------------*/}

الآن في هذا الكود يخبر المتصفح أنه إذا كان حجم الشاشة أقل من الحد الأقصي للعرض مثلاً 1280px سيقوم بضبط العرض - ستقوم بإختيار الكود المناسب لك.

نصائح:

1. إذا كنت تستخدم كود Media Queries فعند وضعك لحجم الخط عليك بإستخدام "em" بدلاً من "px" في أكواد "font-size, padding, margin..إلخ"

2. استخدم النسبة المئوية عند تحجيم الأعمدة عند استخدام خصائص "box-sizing, max-width , min-width..إلخ"

3. حاول تغطية العناصر بـ "div" وإعطائها أكثر من عرض في أحجام الشاشة المختلفة ,ويمكنك أيضاً القيام بذلك مع "body".

السبت، 14 يونيو 2014

[شرح] إنشاء قالب بلوجر متجاوب

هناك 4 تعليقات :

التسميات