مانیستر دات آی آر

با سلام خدمت دوستان عزیز . با یک آموزشی کاربردی در خدمتیم.در این آموزش امید به این هست که بتونید یاد بگیرید قالب های خودتونو واکنش گرا کنید.خود مدیر ازشد قسمت اسپم گوگل (فک کنم قسمت اسپم بود :دی یادم نیست) آقای مت کاتس گفته که سایت هایی که ظاهری واکنش گرا دارند از نظر گوگل محبوب ترند.

دوستان گلم من سعی میکنم به صورت ابتدایی و ساده بگم که برای همتون آسون باشه یعنی میخوام مانیستر با ساده بودن و قابل فهم بودن معروف بشه! ما اصلا فرض میکنیم شما هیچی از طراحی و کدنویسی واکنش گرا نمیدونین.

قالب واکنش گرا چرا برتر هست؟

قالب واکنش گرا باعث میشه بازدید کننده از ظاهر سایت شما با هر وسیله ای مانند : تبلت ، موبایل ، آی پد و... راضی باشه و اذیت نشه. میتونیم بگیم قالب واکنش گرا بسیار خوش اخلاقه و خودشو با هر شرایطی سازگار میکنه .

کمی خلاقیت لطفا !

سعی نکنید همیشه قالب هاتون مثل هر دفعه باشه منظورم اینه که اگه شما فقط عادت کنید قالب های دو ستونه رو واکنش گرا کنید توی قالب ها سه ستونه می مونید . من اساس کارو یادتون میدم شما باید متناسب با شرایط قالبتون کد هارو ادیت کنید.مثلا بعضی قالب ها تبلیغات زیاد دارن میتونین کاری کنین که توی گوشی تبلیغات نشون داده نشه.

چجوری میتونم قالبمو ریسپانسیو کنم؟

خب شما میتونین با استفاده از css به راحتی قالبتونو ریسپانسیو کنین (Media Queries )

حتما توی جاوا اسکریپت عبارات شرطی رو بلدین ! ما میخوایم همینجا هم دقیقا این کارو کنیم.

خب دقیقا به این صورت اسکرین رو تعیین میکنیم

@media screen and (max-width: 980px) {

    تغییرات

}

شما میتونین اندازه رو کم یا زیاد کنید. میتونین اندازه های نرمال دستگاه های مختلف رو گیر بیارید.

یادتون باشه دیو مادر بادی رو بر اساس درصدی تعیین کنید .

البته برای واکنش گرا کردن میتونین از چند راه برید. حتی میتونین از پلاگین BootStrap کمک بگیرید که توصیه نمیکنم!

نکات نهایی :

Media Queries رو حتما توی یه فایل css بذارید.

مشکل مرورگر IE

IE از Media Queries پشتیبانی نمیکنه البته ورژن های قدیمی رو عرض میکنم برای حل این مشکل این کد رو اضافه کنید:

<!--[if it IE9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

مشکل بزرگنمایی در گوشی های Iphone :

اینم چاره داره!

<meta name="viewport" content="width=device-width; initial-scale=1.0">

تموم شد !

واقعا سخت بود ؟ :دی