responsive کردن قالب

[ali1373 10]

سلام به همگی

ایا راه نسبتا ساده ای وجود داره که بشه یه قالب رو responsive (واکنشگرا) کرد؟!

:auau:

[محمدامین رمرودی 29]

درود

در این مورد تاپیک های نسبتا زیادی در انجمن موجود هست که میتونید استفاده کنید ازشون.

ولی برای تکرار مسئله یه توضیح مختصر میدم.

طراحی رسپانسیو یا واکنش گرا چیزی نیست که با افزودن در خط کد ایجاد بشه. روش ها و مراحل مختلفی داره.

برای مثال کد های @media در css به ما کمک میکنند که یک دستور شرطی بر اساس عرض و ارتفاع مانیتور بنویسیم. یعنی با این کد ها میتونیم به مرورگر بگیم اگر عرض مانیتور x پیکسل بود اونوقت عنصر y رو نشون نده یا عرض خاصی براش در نظر بگیر.

نکته ی دیگری که هست در طراحی رسپانسیو لازمه ابعاد اجزا نسبت به ابعاد مانیتور انعطاف پذیر باشند. یعنی چی؟ یعنی اینکه اگر ما جزئی در سایت داریم که عرضش یک سوم مانیتور ما هست در صفحه نمایش دیگر ( میخواد تبلت باشه ، گوشی باشه یا هر چیز دیگه ) هم همون یک سوم باشه. اینجا میایم و به جای اینکه برای ابعاد اجزا از واحد پیکسل ( px ) استفاده کنیم از درصد (%) استفاده میکنیم.

یه سری جاها هم از فایل های جاوا اسکریپت کمک میگیریم. مثل منو های رسپانسیو !

همچنین برای زیباتر کردن کار و راحت تر کردن کار میشه از چارچوب های رسپانسیو ( framework ) که به شامل فایل های css و Javascipt هستند استفاده کنیم.یکی از پر طرفدارترین این فریم ورک ها ، فریم ورک محبوب Twitter Bootstrap هستند با جستجو در اینترنت میتونید به اطلاعات بیشتر ، نمونه ها و لینک دانلودش دست پیدا کنید.

به این تایپیک هم سر بزنید

فروش نوروزی94 آموزش اصول طراحی قالب Responsive