قد يعتقد البعض أن جعل قالب بلوجر متجاوب أمر صعب و مستعص , لكن العكس ! فالأمر سهل للغاية , لكن متعب نوعا ما , فكل ما ستقوم به هو إنشاء نسخة لكل نوع من أجهزة التصفح (الحاسوب / التابليت / الهاتف ) بتعديل الcss الخاص بموقعك .
سنبدأ الأن في مثال عملى , فقط ركز و استوعب كل ما ستقرأه و لما لا تقرأه أكثر من مرة ليكون الفهم بناء و تستوعب كل المعلومات
أولا عليك أن تقوم بدراسة لأحجام الأجهزة التي يزورك متابعيك منها
البحث عن
</head>
فوقه
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
الأن , إن كنت تملك دراية بالcss ستتمكن من العمل , الأن ابحث عن سيكون عملك في المنطة بين
<b:skin><![CDATA[
و
]]></b:skin>
هذا إن كنت تشتغل على بلوجر , لكن إن كنت لا تشتغل على بلوجر , اسكتب شفرتك في ملف الcss الخاص بك
المهم الأن هنا :
احذف الكود الخاص ب 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 ------------*/ }
بدل /* CSS FOR NETBOOK AND DESKTOP ------------*/ اكتب الcss الخاص و المتوافق مع الحاسوب و الأجهزو ذات الشاشات الكبيرة .
بدل /* CSS FOR TABLETS ------------*/ اكتب كود css الخاص بالتابليت
بدل /* CSS FOR SMALL TABLETS ------------*/ اكتب كود css الخاص بالتابليت الصغيرة
بدل /* CSS FOR IPHONE ------------*/ اكتب كود css الخاص بالأيفون Iphone
بدل /* CSS FOR MOBILES ------------*/ اكتب كود css الخاص بالهواتف
بدل /* CSS FOR SMALL OLD MOBILES ------------*/ اكتب كود css الخاص بالهواتف ذات الشاشات الصغيرة
لم تفهم جيدا ؟؟ إليك مثال تطبيقي :
لدي ال css الخاص بي :
.logo{
width:300px;
}
.header{
width:1000px;
}
سنحاول جعله متوافقا مع جميع الأجهزة كما نريد
@media screen and (max-width : 1280px) { .logo{width:300px;} .header{width:1000px;}}
@media screen and (max-width : 1024px) { .logo{width:250px;} .header{width:800px;}}
@media screen and (max-width : 768px) { .logo{width:200px;} .header{width:600px;}}
@media screen and (max-width : 640px) { .logo{width:150px;} .header{width:450px;}}
@media screen and (max-width : 480px) { .logo{width:250px;} .header{width:300px;}}
@media screen and (max-width : 320px) { .logo{width:200px;} .header{width:250px;}}
وسيظهر بأشكال نريدها نحن في كل جهاز
فذا درس مكتوب لجعل قالب بلوجر متجاوب , لكن ستكون قريبا دروس مصورة بالفيديو
0 التعليقات :
إرسال تعليق