رسپانسیو دیزاین!؟ چی هست؟
طراحی رسپانسیو یا واکنش گرا به عملی گفته میشه که انجام اون باعث میشه سایت یا صفحه شما در همه دیوایس ها بخوبی دیده بشه. امروزه با توجه به تنوع اندازه های صفحه نمایش طراحان وب ملزمند که صفحه رو واکنش گرا طراحی کنن تا همه کاربرا بتونن بخوبی صفحه وب رومشاهده کنن یعنی استفاده از اون سایت برای کاربر به راحت ترین شکل ممکن و کاملا متناسب با اندازه صفحه نمایش دیوایس کاربر باشه.
شاید برای افرادی که بتازگی وارد این حیطه شدن "طراحی واکنش گرا" براشون ترسناک باشه! اما حقیقت اینه که خیلی خیلی ساده تر از چیزیه که فکرشو بکنید. در ادامه متوجه میشید که این کار چقدر راحت و لذتبخشه
خوب آماده اید؟
گام اول: افزودن تگ meta به header صفحه
خوب قبل از هر چیز برای اینکه ما حالت زوم مرورگرهای موبایل رو غیر فعال و صفحه فیت تن موبایل کنیم باید از این متا تگ استفاده کنیم. این کد رو در بین تگ head داکیومنت قرار بدید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
دوستانی که میخوان علت دقیق این کارو بدونن میتونن از اینجا مطالعه کنن.
گام دوم: ساختار HTML
در این مثال ما یه صفحه ابتدایی برای این آموزش داریم که این صفحه header داره، بخش محتوا داره، سایدبار داره و فوتر. content ما 600 پیکسل ثابت تعریف شده و sidebar هم 300 پیکسل هست (Fixed width).
گام سوم: Media Query
کار اصلی توسط Media Query که در CSS3 معرفی شده انجام میشه. ما با استفاده از Media Query میتونیم شرط بذاریم که در اندازه های مختلف صفحه ها چطور رندر یا نمایش داده بشه.
برای مثال تو کد زیر ما گفتیم اگر اندازه صفحه ۹۸۰ پیکسل یا کمتربود محتوای داخل بلاک اجرا بشه:
ما اینجا گفتیم اگر عرض صفحه صفحه ۹۸۰ پیکسل یا کمتر بود عرض المنتهامون رو بصورت درصدی انجام بشه یعنی تا تغییر اندازه صفحه عرض هر المنت نسبت به اندازه پنجره مرورگر تغییر میکنه (Fluid width)
به همین راحتی برای انجام بقیه مارها هم میتونید از همین تکنیک استفاده کنید. مثلا میتونید برای اندازه های کوچکتر(مثلا موبایل) کلا ساید بار رو حذف کنید یا در پایین محتوا قرار بدید:
اینجا من فقط دو مثال خدمتتون ارائه کردم که نحوه کارو بدونید چطور هست. حالا شروع کنید و صفحه های رسپانسیو بسازید. سوالی هم داشتید ما در خدمت شما هستیم. ;)