• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

واکنشگرا کردن تصاویر (جلسه 13) : Image Breakpoint - قسمت اول

0 219 ۱۳ اردیبهشت ۹۵

در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.Responsive-Design

Breakpoint تصاویر واکنشگرا چی هستند؟

در چارچوب واکنشگرا خودمون، breakpoint ها به سایز viewport که در اون سایز، تغییراتی در چارچوب یا رفتار صفحه ایجاد میشه، اشاره دارن. این نقش رو بیشتر با استفاده از media query ها انجام میدیم.

Breakpoint تصاویر واکنشگرا شبیه به تعریف بالایی هستن اما تفاوتهایی در اونا وجود داره. زمانی که در مورد breakpoint تصاویر فکر میکنیم، تلاش میکنیم که به دو سوال پاسخ بدیم:

  • چه تعداد منبع تصویر نیاز داریم تا بتونیم تمام سایزهایی که در همه شرایط به اونا نیاز داریم رو فراهم کنیم؟
  • کجا و در چه زمانی باید از منابع متعدد تصاویر استفاده کنیم؟

پاسخ دادن به این سوالها بستگی به Breakpoint هایی که برای پیاده سازی چارچوب واکنشگرا انتخاب میکنیم، داره. برای چارچوب فعلی که قصد داریم در مورد اون توضیح بدیم از روش پیشرفته Stephen Hay استفاده میکنیم. این روش به این صورت هست که ما مرورگر رو تغییر سایز میدیم و از بزرگ به کوچک میاریم و هر جایی که ظاهر و چیدمان اون بد شد و همه چیز بهم ریخت، اونجا به یک breakpoint نیاز داریم.

به استثنای مورد Art Direction، دلیل اصلی برای اینکه ما چه نیازی به چندین منبع برای تصاویر خودمون داریم، تنها به این مورد ختم نمیشه که چون در اون سایز تصویر بد میشه یا کیفیتشو از دست میده. ما قصد داریم که تعداد منابع تصویرمون رو زیاد کنیم تا Performance سایتمون رو بالاتر ببریم و بر روی دستگاههای مختلف با چگالی صفحه مختلف و ... به خوبی نمایش داده بشن.

بنابراین به سادگی نمیشه Breakpoint هایی که برای صفحه در نظر گرفتیم رو برای تصاویر هم استفاده کنیم. شاید هم بتونیم ولی با این کار خیلی از قواعد واکنشگرا کردن تصاویر پیروی نکردیم.

Breakpoint تصاویر برای موارد Art Direction ساده هستن

در مواردی که با Art Direction سر و کار داریم، میتونیم مشخص کنیم که چه تعداد تصویر نیاز داریم و هر کدام در چه سایز و شرایطی نمایش داده بشن. مثلا میتونین بگید که زمانی که از حالت Landscape به Portrait در موبایل ها تغییر وضعیت میدید، منبع تصویرتون عوض بشه و تصویر دیگه ای نمایش داده بشه.

برای مثال میتونین کد زیر رو در نظر بگیرید که در جلسات قبلی هم دیده بودینش:

همونطور که میبیند در کدهای بالا تعدادی سایز مشخص شده و با استفاده از اونا در شرایط خاصی تصاویر رو تغییر میدیم، اما این کد به تمامی سوالهای ما در مورد Breakpoint تصاویر پاسخ نمیده.

در جلسات بعدی با ادامه مطالب در خدمتتون هستم.

موفق و سربلند باشید.

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram