• اسکریپت,قالب جوملا,قالب وردپرس,مرجع اسکریپت,نال شده,نال

  • تبلیغات



    موضوعات

    بایگانی شمسی

    محبوبترین مطالب

    به پایگاه تخصصی اسکریپت پارسی زبانان خوش آمدید.




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

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

    تاریخ : چهارشنبه، ۱ مرداد ۱۳۹۳
    1,178 views
    ۰دیدگاه
    نوشته:مدیر

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

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

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

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

     

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

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

    مثلا میتوان هدر سایت را به جای ۹۸۰ پیکسل , ۱۰۰% گذاشت و یا نسبت پهنای sidebar و content رو ۳۰% به ۷۰% داد .

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

    برای داشتن یک  سایت بسیار حرفه ای , باید برای تمامی رزولیشن های معروف ( کمتر از ۱۰۲۴ , ۱۰۲۴ , ۱۲۸۰ , ۱۳۶۶ , ۱۴۴۰ , ۱۹۲۰ و بیشتر از ۱۹۲۰ ) نوشت .

    برای کمتر از ۱۰۲۴ میتوان کد زیر را نوشت :

     

    برای بیشتر از ۱۹۲۰ میتوان کد زیر را نوشت :

     

     

     

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

     

     

     

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

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

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

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

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

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

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

    دانلود
    حجم:

    Time limit is exhausted. Please reload CAPTCHA.



    تبلیغات



    آخرین ارسال ها

    نرم افزارهای ضروری

    XAMPP XAMPP
    5.6.8
    NotePad++ NotePad++
    6.8.1
    FileZilla FileZilla
    3.7.3

    پربازدید ترین ها

    آخرین دیدگاه‌ها

    تبلیغات متنی

    Email Newsletter

    Sign up for our email newsletters
    با عضویت در خبرنامه ی ما از آخرین مطالب ما در ایمیل خود با خبر شوید