151
تشکر

آموزش طراحی ریسپانسیو

آموزش طراجی ریسپانسیو

آموزش طراجی ریسپانسیو

در این مطلب به آموزش پایه ای طراحی ریسپانسیو خواهیم پرداخت.

اگر هنوز مطلب  “طراحی ریسپانسیو (Responsive) چیست؟” را نخواندید توصیه میکنم ابتدا آن را بخوانید.

برای آنکه بتوانیم یک سایت ریسپانسیو را درست به کاربر نمایش دهیم باید ابتدا اندازه نمایشگر کاربر را بگیریم و مطابق با اندازه نمایگشر کاربر, سایت را نمایش دهیم.

نترسید. ما برای همه نمایشگرها طراحی جداگانه ای انجام نمیدهیم. فقط برای نمایشگرهایی با اندازه های پایین:

320px (نمایشگرهایی که کمترین عرضشان 320px است).

480px (نمایشگرهایی که کمترین عرضشان 480px است).

600px (نمایشگرهایی که کمترین عرضشان 600px است).

768px (نمایشگرهایی که کمترین عرضشان 768px است).

900px (نمایشگرهایی که کمترین عرضشان 900px است).

1200px (نمایشگرهایی که کمترین عرضشان 1200px است).

خب تا اینجا شما با کل کاری که در آینده خواهید کرد آشنا شدید.

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

شما به دوصورت قادر به انجام این کار هستید. راه اول در گذاشتن فایل های CSS جدا برای هر نمایشگر. در این روش وقتی از طریق تگ link فایل استایل را به صفحه وصل میکنید با استفاده از خاصیت media اندازه نمایشگر را مشخص میکنید:

	<link rel="stylesheet" media="screen and (min-width: 480px) href=" /> 

در نوع دوم شما در خود فایل CSS اندازه نمایشگر را مشخص میکنید:

@media screen and (min-width: 480px) {
    .content {
        float: left;
    }
    .social_icons {
        display: none
    }
}

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

  • محمد می‌گه:

    سلام
    من دارم یه قالب وردپرس مینویسم.
    میخواستم بدونم min-width: 480px یعنی عرض هایی که حداقل باید 480 پیکس باشن
    مثل 491 پیکسل
    درسته؟
    بعد یه چیزی
    اگر من واسه سه تا عرض 320px و 768px و 1200 استایل نویسی رو جدا انجام بدم سایتم رسپانسیو میشه؟
    یا راهی هست که من با همون استایل اورجینال هم یه قالب رسپانسیو داشته باشم؟
    کد های مربوط به رسپانسیو چیا هست که من باید اونا رو بزارم تا قالبم رسپانسیو شه؟ منظورم مال موقعیه که واسه سه تا سایز بالا استایل جدا بنویسم.

  • بهاره می‌گه:

    آیا برای یک قالب ریسپانسیو فول اسکرین هم می تونید مثالی بزنید؟ یا قالب آماده ای معرفی کنید؟ ممنون.

  • مریم می‌گه:

    سلام

    من برای ریسپانسیو کردم سایتم باید چکار کنم ؟ کمکم می کنید
    http://hamedantabligh.com

  • عارف می‌گه:

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

  • B-t می‌گه:

    چرادیروز سوال پرسیدم جواب منو ندادین؟
    :(

  • Alireza می‌گه:

    سلام
    ممنون بابت آموزش خوبتون
    من سایز صفحه خودم رو به 1024*768 تغییر دادم و ایندکسی که در سایز 1360*768 کد کرده بودم رو باز کردم و css هارو طوری ویرایش کردم که در سایز 1024 درست نمایش داده بشه
    بعد هر دوتا روش بالا رو تست کردم ولی توی سایز 1024 بازهم مثل قبل و بهم ریخته نشون میداد

    http://amxx.ir/asia-game/

  • حافظ می‌گه:

    آقا حال کردم.
    خوشم اومد.
    اگه همه جا آموزش ها رو اینجوری بزارن چی میشه 😀

  • محمد می‌گه:

    ممنون از پاسختون. این قانون واسه تمام سایزها صادق هست؟

  • محمد می‌گه:

    ببخشید. زمانی که میخوایم مثلا برای صفحه ی 320 استایل تعریف کنیم،آیا باید برای اسکرول بار هم فضا در نظر گرفته بشه یا نه؟

  • ایکار می‌گه:

    در روش اول “گذاشتن فایل های CSS جدا برای هر نمایشگر”، فایل css وقتی لود میشه که صفحه نمایش اون سایز باشه؟ یا همیشه لود میشه؟؟
    ممنون

  • ramazan می‌گه:

    nice work

  • raha می‌گه:

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

  • رها می‌گه:

    واقعا ممنونم از راهنمایی شما
    اما اگه امکان داره کاملتر بنویسین که این element بصورت کلی در کجای کار نوشته میشه و شکل کلی این حالت رو بنویسید
    مدتهاست که دنبال این جوابم
    با تشکر
    با اینکار منو مدیون خودتون میکنید

  • رها می‌گه:

    سلام و عرض ادب
    در این سایت :
    http://www.mywindows.ir/
    وقتی با فایرباگ به سورس برنامه نگاه میکنیم میبینیم که 5 باکس رو با یه کلاس و با یک نام در html تعریف کرده البته وقتی مرورگر در حالت maximize هست 5 تا باکس هستن اما همین که مرور گر رو کمی از عرض جمع میکنیم باکسها به 4 عدد کاهش پیدا میکنند و این روند هم با کم کردن عرض ادامه داره در صورتی که باکسها هم نام هستند و همه هم با یه کلاس تعریف شدند
    اگه امکان داره وراه حلی براش میدونین منو راهنمایی کنین
    با تشکر وارزوی توفیق

    • محسن شفیعی می‌گه:

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

      .box:nth-child(5) {
      display: none;
      }

      به این صورت که عدد 5 نشان دهنده باکس پنجم است.

  • رها می‌گه:

    سلام
    ممنونم از جواب شما اما اگه بخوام از 4 تا باکس در اندازه 1200 نمایش داده بشه اما در یه اندازه دیگه فقط 2 تاش نمایش داده بشه چطور باید اون دوتای دیگه رو display:block کنم چون در این مواقع ما اون رو در html با class مینویسیم و در css هر 4 تا calss فراخوانی میشن اما چطور میشه در موقع فراخوانی در css با عرض های کمتر جلوی فراخوانی و نمایش دو تا از اونها رو گرفت /
    اگه راه حلی هست لطفا واضح تر راهنمایی کنین
    با تشکر

    • محسن شفیعی می‌گه:

      خب شما باید به اون دو تا باکسی که قرار هست در یک اندازه دیگه نمایش داده نشن یک کلاس جداگانه دیگه هم بدید, و با استفاده از اون کلاس کارتون رو انجام بدید.

  • رها می‌گه:

    سلام
    اگر در قسمت هدر در html چهار باکس تعریف کنیم که در عرض مثلا 1240 چهار باکس هر کدام با عرض 250 نمایش داده بشه ولی بخواهیم در عرض 740 بجای چهار باکس دو تا با اندازه 300 نمایش داده بشه و دو تای دیگه رو مخفی کنیم باید چکار کرد
    چون در html باید به این شکل نوشته بشه
    div class=box
    div class=box
    div class=box
    div class=box
    و مادر هر اندازه ای که درcss تعریف کنیم 4 باکس رو میشناسه اما ایا راه حلی برای این مسئله هست که در اندازه های مختلف ما مثلا بتونیم دوتا از اونها رو مخفی کنیم
    با تشکر
    ممنتظر راهنمایی های شما هستم

    • محسن شفیعی می‌گه:

      بله. شما میتونید با استفاده از خاصیت display هر عنصری رو که خواستید نمایش ندید. مثل کد زیر:

      /* Landscape phone to portrait tablet */
      @media (max-width: 767px) {
      .box{display: none;}
      }

  • محسن می‌گه:

    مرسی.واقعا متشکرم

  • محسن می‌گه:

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


  • نظرات این مطلب بسته است.