آموزش صفت Sizes در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت Sizes در HTML با من همراه باشید.

آموزش صفت Sizes در HTML

Free-Learn

صفت Sizes در HTML

صفت sizes صفتی است که با استفاده از آن میتوان سایز یا اندازه یک فایل را در حالت های مختلف صفحه نمایش مشخص کرد.

مثلا میتونیم بگیم اندازه یک تصویر در موبایل ۴۰۰ پیکسل باشد و همون تصویر در کامپیوتر ( لپ تاپ و .. ) با ۸۰۰ پیکسل نمایش داده بشه.

خب الان همین حرکت رو بهش میگیم واکنش گرایی، یعنی اینکه مثلا تصویر ما در حالت های مختلف صفحه نمایش ( صفحه نمایش گوشی موبایل یا لپ تاپ یا تبلت و.. ) بتونه بخوبی نمایش داده بشه.

خب شاید سوال اینه که به چه درد میخوره؟ خب میشه باهاش تصاویر رو واکنش گرا کرد، خب یک تصویر اگه واکنش گرا نباشه و اندازش هم بزرگ باشه روی گوشی های موبایل تصویر از کادر میزنه بیرون و این زیاد جالب نیست.

ولی خب ما به راحتی با استفاده از این صفت و البته ( صفت Srcset ) ( یعنی این ۲ صفت باید در کنار هم استفاده شوند ) میتونیم تصاویرمون رو واکنش گرا کنیم که در گوشی های موبایل هم با اندازه مناسب نمایش داده شوند.

Free-Learn

عناصری که توسط این صفت پشتیبانی می شوند

این صفت را میتوان در عناصر/تگ های زیر بکار برد.

<img> <link>

Free-Learn

مثال از صفت Sizes در HTML

در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.

لطفا بروی دکمه ( امتحان کنید ) کلیک نمایید، سپس اندازه صفحه را تغییر دهید تا عملکرد را مشاهده نمایید. ( برای تغییر اندازه دقیقا وسط صفحه را با ماوس بگیرید و به سمت راست یا چپ بکشید )

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت sizes در HTML پشتیبانی میکنند یا خیر.

نام تگ Chrome Firefox Opera Safari IE
link بله بله بله بله بله
img بله بله بله بله بله

Free-Learn

نکات و توضیحات

راحت ترین روش برای واکنش گر کردن تصاویر و یا در کل هر عنصر دیگری در یک صفحه وب ، استفاده از CSS می باشد، پیشنهاد میکنم از CSS برای واکنش گرایی استفاده نمایید.

با استفاده از صفت SrcSet میتوان یک یا چندین تصویر را برای نمایش در حالت های مختلف صفحه تعریف کرد، در همین رابطه پیشنهاد میکنم نگاهی به تگ Picture در HTML بیندازید.

صفت Sizes در تگ Link فقط در نوع آیکون برای مشخص کردن اندازه فاویکون استفاده میشود. ( برای مشاهده مثال کلیک کنید )

Free-Learn

دریافت PDF یا پرینت این مطلب