آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

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

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