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

[sajjad salehi]

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

روشهای دیگه ساختن چند تا قالب آماده برای اندازه های مختلف یا پیدا کردن عرض صفحه به کمک اسکریپت و تنظیم قالب فونت وعکسها با جاوا اسکریپت یا css هست .
---------
ولی به نظر من بهترین حالت استفاده از چند لایه است لایه ی با عرض ثابت برای نمایش متن(که سایت شما داره) و بک گراند ریسپانسیو (شناور یا فیکس) +قالبی برای حالت موبایل
اینجا یک گراند فیکس برای حالت ریسپانسیو استفاده شده
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

فقط با استفاده از صفت cover برای background-image
رمز این روش در استفاده از عکسهای png با حاشیه ی transparent و استفاده از patern یا عکسی در بک گراند که با لایه ی رویی ست باشه به شکلی که معلوم نباشه لایه ی رویی کجا تموم یا شروع میشه .
در سایت شما عکس بالا سمت چپ و فوتر رعایت شده کافیه بقیه ی لایه ی رویی رو هم همین شکل اجرا کنید و بک گراند رو هم عوض کنید و تنظیم کنید .
البته این آموزش کامل نیست فقط کمی از سر خط مطالب گفتم اگه آشنایی داشته باشید خودتون با کمی آزمون و خطا و دیدن نمونه قالبها دستتون میاد . وگرنه بهتره بدید براتون انجام بدن .