چگونه قالب طراحی شده را ریسپانسیو کنم؟

با سلام

من سایت http://behrangtc.ir/fa رو طراحی کردم. اما این قالب با توچه به اینکه با آرتیستییرزده شده اما در موبایلهایی چون آیفون بهم ریخته نمایش داده میشه، اما در تبلت اوکی هاست.

چگونه میتونم اون رو ریسپانسیو یا کاری کنم که درست نمایش داده بشه؟

تشکر

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

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

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

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

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

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

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

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

موفق باشید :ad54ad:

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

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

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

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

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

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

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

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

موفق باشید :ad54ad:

ممنون از راهنمایتون، اما در حال حاضر پیشنهاد یا بهتر بگم راه حل من برای برطرف کردن سایت فوق چی هست؟

یا باید از قالب و افزونه هایی که رسپانسیو هستند استفاده کنید یا اینکه مشکلات رو پیدا کنید و توسط همون روش media که گفتم مشکلات رو در صفحه نمایش های ریز درست کنید.

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

در این تاپیک توضیح مختصری برای رفع این دسته مشکلات دادم : مشکل بهم ریختگی فوتر قالب با بعضی سایزها و هنگام زوم

در این تاپیک هم دوست خوبمون مهندس طیبی توضیحات کاملی برای داشتن یک سایت رسپانسیو دادند : آموزش اصول طراحی قالب Responsive

یا باید از قالب و افزونه هایی که رسپانسیو هستند استفاده کنید یا اینکه مشکلات رو پیدا کنید و توسط همون روش media که گفتم مشکلات رو در صفحه نمایش های ریز درست کنید.

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

در این تاپیک توضیح مختصری برای رفع این دسته مشکلات دادم : مشکل بهم ریختگی فوتر قالب با بعضی سایزها و هنگام زوم

در این تاپیک هم دوست خوبمون مهندس طیبی توضیحات کاملی برای داشتن یک سایت رسپانسیو دادند : آموزش اصول طراحی قالب Responsive

آیا با کامپوننت Responsivizer میشه اینکارو کرد؟

آیا با کامپوننت Responsivizer میشه اینکارو کرد؟

کار نکردم باهاش و نمیتونم جواب قطعی بدم

ولی بعید میدونم تماما بتونه رسپانسیو کنه