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

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



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

واکنشگرا کردن تصاویر (جلسه 8) : المنت Picture

4 259 ۱۵ فروردین ۹۵

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

در قسمتهای قبل ما به دنبال راه حلی برای مورد Resolution Switching بودیم. حالا وقتشه که در مورد راه حل مورد Art direction صحبت کنیم.

المنت Picture و خصوصا ویژگی media بوجود اومده که کار کردن با مورد Art Direction رو آسون کنه.picture-syntax

المنت Picture شامل مجموعه ای از المنتهای Source و یک تگ img اجباری هست. المنتهای Source دقیقا همانند المنتهای Source تگ Video عمل میکنند.

هر المنت Source یک ویژگی srcset اجباری و چند ویژگی دلخواه مانند media و type و size داره. هر دو ویژگی srcset و sizes بر روی المنت source همون کارایی رو دارن که بر روی المنت img دارند.

در اینجا قصد داریم بر روی ویژگی media تمرکز کنیم و اونو توضیح بدیم.

ویژگی media

مقداری که در ویژگی media قرار میگیره یک media query هست. بر خلاف media condition که در ویژگی sizes بکار برده میشد، این مورد همانند media query کامل عمل میکنه و تمام ویژگی هایی که شما میدونید و خوشتون میاد رو داره.

هنگامی که مرورگر  لیستی از المنتهای Source رو مشاهده میکنه و به اونا میرسه، اولین Source که شرایط media query اون صدق کنه، تصویرش مورد استفاده قرار میگیره و اگر هیچ media query صدق نکنه، المنت img و src اون نمایش داده میشه.

ویژگی Media یک امرکننده هست نه پیشنهاد دهنده

برخلاف srcset و sizes، زمانی که شما از ویژگی media استفاده میکنید، شما به مرورگر دیکته میکنید که کدوم تصویر باید لود بشه و نمایش داده بشه. در اینجا مرورگر هیچ حقی در انتخاب تصویر مورد نظر نداره. این روش میاد و اون تصویری که شرایط Media query اون صدق میکنه رو لود میکنه و نمایش میده.

مهمترین دلیلی که المنت Picture بدرد مورد Art Direction میخوره، همین امرکننده بودن اون هست. در مورد Art Direction طراحان میخوان مطمئن باشند که در سایز خاصی از Viewport تصویر خاصی نمایش داده بشه، در صورتی که اون تصویر مورد نظر لود نشه یا تصویر دیگه ای بجای اون لود بشه، کل طراحی و ظاهر بهم خواهد خورد.

به کد زیر دقت کنید:

اگر به کد بالا دقت کنید، میبینید که سه Breakpoint قرار داده شده و در هر کدام یک تصویر با طول ثابت قرار داده شده است. این تصاویر از یک سایز به سایز دیگه میپرن و سایزشون بصورت flexible تغییر نمیکنه.

بدلیل اینکه تصاویر مورد نظر دارای عرض ثابت هستند، توصیف گر چگالی صفحه در srcset قابل مفهومه و میشه بخوبی از اون استفاده کرد. در نتیجه برای هر Breakpoint در کد بالا دو منبع 1x و 2x قرار داده شده است. کد بالا رو میشه بصورت زیر توصیف کرد:

  • <source … media="(min-width: 990px)"> : بزرگترین تصویری که در سایز Desktop لود میشه توسط اولین Source قرار داده شده. ویژگی Media به مرورگر میگه که این تصویر تنها زمانی که سایز تصویر بالاتر از 990 پیکسل هست، لود بشه.
  • <source … media="(min-width: 750px)"> : این مورد مربوط به تصویر tablet هست که اگر سایز viewport چیزی بین 750 تا 989 پیکسل باشه، این تصویر لود و نمایش داده میشه.
  • اگر هیچ کدام از منابع بالایی شرطشون صدق نکنه، اون تصویری که در تگ img تعریف شده است لود و نمایش داده میشه. پس در بالا از سایز 749 به پایین تصویر مربوط به Mobile لود میشه.

اگر تصاویرمون بجای اینکه عرض ثابتی داشته باشند، flexible باشن، شما میتونین بجای استفاده از توصیف گر چگالی صفحه از توصیف گر عرض یا width استفاده کنید.

پس نتیجه میگیریم که اگر شما با یک مورد Art Direction روبررو شدید برای حل اون باید از Picture استفاده کنید. المنت Picture یک ویژگی دیگه بنام Type هم داره که در جلسه بعد در مورد اون براتون توضیح میدم.

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

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

یا علی

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

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    ممکنه بگید توی کدوم فایل قالب باید این کد ها رو قرار داد؟

  • ‏‏

    یه سوال دیگه
    مثل این که وردپرس خودش به تصاویر تگ srcset اضافه میکنه که توی سایت بنده باعث کلی مشکل شده ممکنه بگید توی هسته ی وردپرس کدوم قسمت این کد اضافه شده

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram