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

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



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

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

0 236 ۱۲ فروردین ۹۵

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

مرورگر چطور مقدار سایز صحیح رو انتخاب میکنه؟

زمانی که مرورگر به مقدار درون sizes که لیستی شامل کاما هست میرسه، مقدار اول اون رو که همون media condition هست میگیره. یکبار دیگه به کدی که در جلسه قبل نوشتیم نگاهی میندازیم:

حالا میخایم مقادیری که در ویژگی sizes قرار داده شده رو توضیح بدیم:

  • max-width: 480px) 100vw) - این عبارت به معنای اونه که اگر سایز viewport برابر با 480 پیکسل یا کمتر بود، تصویر مورد نظر باید 100 درصد عرض viewport باشه.
  • max-width: 900px) 33vw) - زمانی که سایز viewport برابر با 480 پیکسل یا کمتر باشه این شرط هیچوقت اجرا نمیشه و شرط قبلی اجرا میشه. این عبارت میگه که زمانی که سایز بین 481 تا 900 پیکسل بود سایز تصویر 33 درصد سایز viewport باشه.
  • 254px - اگر media Condition خاصی وجود نداشته باشد و یا هیچ کدام از media Condition های موجود کاربرد نداشته باشند و صدق نکنند، این مقدار به عنوان مقدار پیش فرض تصویر قرار خواهد گرفت. همونطور که میبینید در مثال بالا media condition هایی که وجود دارند تا سایز 900 پیکسل رو پوشش دادن. اگر سایز viewport از 901 به بالا بود، مقدار برابر با 245 پیکسل در نظر گرفته میشه.

شکایتهای بسیار زیادی ناشی از پیچیده بودن این روش به گوش میرسه. چون برای هر تصویر باید سایزهای متفاوت و زیادی رو قرار داد و اینکار میتونه برای عکسهای زیاد، بسیار وقت گیر باشه و مدیران سایت رو اذیت کنه.

متاسفانه راه حلی برای این قضیه وجود نداره و سایز ها حتما باید قرار داده شوند تا بدرستی کار کند و واکنشگرا شود. بدلیل اینکه مرورگر قبل از اینکه تصویر مورد نظر رو دانلود بکنه، سایز مورد نظر رو نمیدونه و ناآگاه تصویری رو دانلود میکنه.

تنها راهی که میتونیم از pre-loader استفاده کنیم و مطمئن بشیم که تصویر درستی انتخاب و دانلود میشه اینه که اطلاعات مربوط به سایز تصویر رو همونطور که در بالا بیان شد قرار بدیم.

آیا ارزش داره که از این روش استفاده کنیم؟

اگر شما هم مثل من باشید، با خودتون میگید با این همه دردسری که این روش بدنبال داره، ارزششو داره که ازش استفاده کنیم؟

جوابش بله هست.pre-loader-faster-web

Andy Davies یک پست رو نوشته و در مورد اینکه چطور مرورگر Chrome به اندازه 20 درصد و مرورگر Firefox به اندازه 19 درصد متوسط سرعت لود صفحه رو بعد از اعمال Pre-loader بیشتر میکنه، توضیح داده.

در نتیجه استفاده از این روش یک سازش دو طرفه هست و در اضای پیچیدگی و وقت گیر بودنی که داره، اطلاعات مفیدی رو در اختیار مرورگر قرار میده و باعث سرعت لود صفخات میشه و Performance رو بالا میبره.

Srcset و sizes هر چیزی که شما نیاز داشته باشید رو در اختیارتون میزاره تا بتونین موارد resolution Switching رو بخوبی واکنشگرا کنید. این موارد به مرورگر اجازه میده کع تصمیم هوشمندانه ای رو اتخاذ کنه.

اگه بخواید که کنترل بیشتری داشته باشید باید چکار کرد؟ اگر مورد Art direction داشته باشیم چطور؟

اینجا هست که المنت Picture نمایان میشه.

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

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

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram