این آموزش در تاریخ ۱۴۰۲/۰۶/۲۱ آپدیت شده است.
آموزش صفت Sizes در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت Sizes در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت Sizes در HTML
صفت sizes صفتی است که با استفاده از آن میتوان سایز یا اندازه یک فایل را در اندازه های مختلف صفحه نمایش مشخص کرد.
از این صفت هم در تگ link میتونیم استفاده کنیم اونم برای تنظیم اندازه تصویر فاوآیکون و هم در تگ img برای واکنش گرایی تصاویر جهت نمایش هرچه بهتر در اندازه های مختلف صفحه نمایش.
مثلا در تگ img میتونیم بگیم اندازه یک تصویر در موبایل ۴۰۰ پیکسل باشد و همون تصویر در کامپیوتر ( لپ تاپ و .. ) با ۸۰۰ پیکسل نمایش داده بشه. ( البته باید از تصویر مورد نظرمون چندین اندازه مجزا داشته باشیم )
خب الان همین حرکت رو بهش میگیم واکنش گرایی، یعنی اینکه مثلا تصویر ما در حالت های مختلف صفحه نمایش ( صفحه نمایش گوشی موبایل یا لپ تاپ یا تبلت و.. ) بتونه بخوبی نمایش داده بشه.
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
| <img> | <link> |
Free-Learn
مثال از صفت Sizes در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ :استفاده در تگ img
|
1 2 3 4 5 |
<body> <img srcset="files/demo-sizes.jpg 120w , files/demo-sizes.jpg 278w" sizes="(max-width: 700px) 278px"> </body> |
مثال شماره ۲ : استفاده در تگ link ( برای مشخص کردن اندازه تصویر فاوآیکون یا Favicon )
|
1 2 3 |
<head> <link href="files/favicon.png" rel="icon" type="image/png" sizes="80x80"> </head> |
توضیح مثال بالا :
فاوآیکون یا Favicon فک کنم بدونید چیه!؟ به اون تصویر کوچک کنار عنوان صفحه تو تب مرورگر رو میگیم فاوآیکون به همین سادگی.
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت sizes در HTML پشتیبانی میکنند یا خیر.
| نام تگ | Chrome | Firefox | Opera | Safari | Edge |
| link | بله | بله | بله | بله | بله |
| img | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این صفت در HTML بصورت زیر می باشد.
- برای تگ img
|
1 |
<img sizes="(Media-Size) Image-Size"> |
اون (Media_Size) یعنی شرط اندازه صفحه نمایش و اون Image_Size یعنی اندازه تصویر موقع نمایش در اون شرط اندازه صفحه نمایش.
مثلا من میخوام وقتی اندازه صفحه نمایش بیشتر از ۵۰۰ پیکسل شد، اندازه عکس ۱۰۰ پیکسل بشه ( همانند مثال شماره ۱ )
|
1 2 3 4 5 |
<body> <img srcset="#" sizes="(min-width: 500px) 100px"> </body> |
- برای تگ link
|
1 |
<link rel="icon" sizes="Width*Height"> |
اون Width یعنی اندازه عرض و Height یعنی اندازه ارتفاع ( همانند مثال شماره ۲ )
Free-Learn
نکات و توضیحات
- از این صفت در تگ link فقط برای صفت rel که برابر است با icon مورد استفاده قرار میگیرد.
- برای واکنش گرایی تصاویر حتما آموزش واکنش گرایی رو دنبال نمایید.
- برای نمایش چندین تصویر در اندازه های مختلف بهینه تره که از تگ Picture در HTML استفاده نمایید.
