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

- visibility ۰ mode_comment

در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.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 تصاویر پاسخ نمیده.

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

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

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.