جهت ورود به تالار گفتمان سایت کلیک کنید


آموزش طراحی سایت ریسپانسیو ( Responsive Design )

ریسپانسیو در لغت به معنای واکنش گرا می باشد . همانطور که تمامی طراحان وب سایت یا حتی کاربران میدانند , سایت ها برای اینکه در تمامی مانیتور های منسوخ نشده حال روز دنیا , به درستی نمایش داده و دارای اسکرول افقی نشوند , برای آنها پهنایی ثابت , منظور همان 980px ( برای رزولیشن های بالای 1024 ) استفاده میشود .

با پیشرفت تکنولوژی و روی کار آمدن موبایل های هوشمند , تبلت ها , مانیتور های رزولیشن بالا و حتی تلویزیون های دارای مرورگر اینترنتی , این خلا ایجاد شده که سایت طراحی شده دارای ابعاد بسیار کوچکتر به نظر میرسند و برای دیدن مطلبی در سایت , باید در آن قسمت زوم کرد …

طبیعتا کاریست بسیار سخت و دست پا گیره …

با روی کار آمدن Css3 و بحث Media Query ها , این مشکل حل شد و حالا ما میتوانید سایت های خود را در ابعاد مختلف و برای رزولیشن های مختلف طراحی کنیم .

طراحی ریسپانسیو

 

اصول اولیه سایت های ریسپانسیو , طراحی بر اساس واحد های درصدی ( % ) به جای پیکسلی ( px ) می باشد .

مثلا میتوان هدر سایت را به جای 980 پیکسل , 100% گذاشت و یا نسبت پهنای sidebar و content رو 30% به 70% داد .

در این نوع طراحی میتوانید با استفاده از کد زیر در css , برای رزولیشن های مختلف طراحی مورد نیاز خود را داشته باشید :

برای داشتن یک  سایت بسیار حرفه ای , باید برای تمامی رزولیشن های معروف ( کمتر از 1024 , 1024 , 1280 , 1366 , 1440 , 1920 و بیشتر از 1920 ) نوشت .

برای کمتر از 1024 میتوان کد زیر را نوشت :

برای بیشتر از 1920 میتوان کد زیر را نوشت :

و برای نوشتن سی اس اس های رزولیشن های معروف :

 نکته 1 : مواردی که در بالا آمده است , برای داشتن یک سایت full ریسپانسیو یه کار میرود و بسیار کامل هستند .  حتما لازم نیست برای تمامی موارد بالا بنویسید و میتوانید به دلخواه و با توجه به شیوه طراحی سایت خود , چند مدیا کوئری بالا را حذف کنید .

نکته 2 : اصلا لازم نیست برای تک تک موارد بالا , css را به صورت کامل بنویسید . کافیست یک css برای مثلا 1024 نوشته , سپس در هر media@ فقط بعضی از css های اصلی را تغییر و نقض نمایید .

به طور کلی باید برای ساخت سایت ریسپانسیو به نکات زیر توجه کرد : 

تا جایی که امکان دارد , واحد اندازه گیری تمامی قسمت ها رو به درصد بدهید , نه به پیکسل .

از عکس های با کیفیت بالا در وب استفاده کنید تا در صورت بزرگ شدن در رزولیشن های بالا , کیفیت آنها خراب نشود ( البته شرط حجم پایین عکس ها رو فراموش نکنید )

در رزولیشن های پایین , باکس های غیر ضروری از جمله تبلیغات را حذف کنید . ( display:none )

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

گرداوری : وحید مجیدی 

 پخش اختصاصی

  • امتیاز شما به این مقاله ؟
    خیلی بدبدمعمولیخوبخیلی خوب (لطفا رای بدید)
  • جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

    10 پاسخ به “آموزش طراحی سایت ریسپانسیو ( Responsive Design )”

    1. ارم سرور گفت:

      چون نرم افزار poedit فارسی سازی رو آسان کرده اما مشکل راستچین کردن هنوز باقی مانده

      • محمد فرجی گفت:

        توی سی اس اس ها از اتربیوت الین استفاده کنید و مقدار اون رو هم right قرار بدید ببینید مشکلون حل میشه

    2. ارم سرور گفت:

      بله پوسته های وردپرس

    3. ایـــــران وردپــــــــرس گفت:

      آموزش بسیار فوق العاده ای بود

    4. ارم سرور گفت:

      با سلام استاد میشه یک آموزش بزارید برای ساخت فایل rtl.css برای فارسی سازی پوسته ها؟

      • وحید مجیدی گفت:

        پوسته های وردپرس ؟

        • محمد فرجی گفت:

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

    5. محمد فرجی گفت:

      سلام
      خیلی وفت بود وقت نکردم به اینجا سر بزنم
      عالی بود
      فقط ی چیز
      باید به جای حتا مینویشتی حتی
      گفتم که اینو اصلاح کنی تک بمونی
      :*

    6. dashesi_lamer گفت:

      عالیه

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *