واکنشگرا کردن تصاویر (جلسه 6) : ویژگی Sizes - قسمت اول

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۱۰ فروردین ۱۳۹۵

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

همونطور که در جلسه قبل بیان کردیم srcset با توصیف گر width قدرت بسیار بالایی داره و میتونه بسیاری از مشکلات موجود رو حل کنه. اما همونطور که دیدید با یک مشکل مواجه شده بود و مشکل این بود که مرورگر فقط سایز viewport رو قبل از دانلود کردن تصاویر میدونست.

حالا و در این جلسه میخایم راه حل این مشکل رو توضیح بدیم و راه حل هم چیزی نیست جز ویژگی sizes.

ویژگی sizes اجباری هست!

هر زمانی که شما از Srcset با توصیف گر width استفاده میکنید باید از ویژگی sizes هم استفاده کنید.

در واقع این ویژگی تنها در موقعی که از توصیف گر width استفاده میکنید، کاربرد داره. اگر از توصیف گر display density استفاده کنید هیچ نیازی به این ویژگی نخواهید داشت.

Syntax استفاده از sizes

شاید با دیدن syntax این ویژگی برای بار اول گیج بشید و فکر کنید که خیلی استفاده از اون سخت باشه:sizes-800

همانند ویژگی srcset که مقدار اون شامل لیستی از آیتمهای جدا شده با کاما هستند، ویژگی sizes هم همچنین مقداری رو دریافت میکنه. این لیست نسبت سایز تصاویر به سایز viewport رو مشخص میکنن.

با استفاده از این ویژگی به مرورگر میگیم که سایز تصویر چه نسبتی با سایز Viewport داره. همچنین میتونیم به مرورگر بگیم که این نسبت تصویر با viewport چگونه تغییر میکنه.

<img src="cat.jpg" alt="cat"
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

Media Condition

مقدار اولی که در هر آیتم قرار داره Media Condition هست. Media Condition شباهت زیادی به Media Query داره اما تفاوتهایی هم بین اونا وجود داره. بعنوان مثال شما نمیتونید از عبارتی مثل @media screen استفاده کنید اما شما میتونین هر کاری که میخاید با استفاده از سایز درون اون انجام بدین.

اون چیزی که بیشتر مرسومه و استفاده میشه اینه که از ‘(max-width: 480px)’ یا ‘(min-width: 480px)’ استفاده کنن.

Lengths

مقدار دومی که در هر آیتم قرار میگیره Length هست. این مقدار در اکثر موارد بر حسب واحد vw یا viewport width هست. شاید تا بحال با این واحد آشنا نشده باشید و یا ممکنه خیلی در مورد اون ندونید. این مقدار تقریبا جدیدا معرفی شده ولی با این حال مرورگرها پشتیبانی خوبی از اونا دارن.

هر واحد vw برابر با 1 درصد از عرض viewport هست. پس اگه در بالا دقت کنید 100vw برابر با 100 درصد viewport هست و 33vw برابر با 33 درصد viewport هست. شما مجبور نیستید که از این واحد استفاده کنید و میتونین از هر واحد دیگه ای هم برای این کار استفاده کنید.

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

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

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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