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

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



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

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

0 266 ۱۰ فروردین ۹۵

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

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

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

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

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

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

Syntax استفاده از sizes

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

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

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

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 هست. شما مجبور نیستید که از این واحد استفاده کنید و میتونین از هر واحد دیگه ای هم برای این کار استفاده کنید.

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

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

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram