این نسخه ی نمایشی را امتحان کنید
برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید
.برنامه را در پنجره‌های مرورگر با اندازه‌های متفاوت بارگیری مجدد کنید تا ببینید مرورگر تصاویر مختلف را بارگیری می‌کند و از طرح‌بندی‌های مختلف در اندازه‌های مختلف مرورگر استفاده می‌کند.
کد را مشاهده کنید
- برای کدی که این کار را انجام می دهد،
index.htmlبررسی کنید:
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
اینجا چه خبره؟
مقدار مشخصه sizes نشان می دهد که عرض نمایش تصویر خواهد بود: "100٪ از عرض دید" در نماهایی با عرض حداکثر 480 پیکسل، "50٪ از عرض دید" در صفحه هایی با عرض 481 تا 1024 پیکسل، و 800 پیکسل در صفحه های گسترده تر از 1024 پیکسل. این عرض ها با عرض های مشخص شده در CSS مطابقت دارند.
توانایی تعیین عرض چند شکاف، طرح‌بندی‌های صفحه‌ای را در نظر می‌گیرد که از استایل‌های متفاوت (یعنی عرض تصویر) برای اندازه‌های دید متفاوت استفاده می‌کنند.
نحوه تعیین عرض چند شکاف
- از یک لیست جدا شده با کاما برای تعیین عرض چند شکاف استفاده کنید. هر مورد فهرست، به جز آخرین مورد، از یک شرط رسانه (مثلاً
max-widthیاmin-width) و یک عرض شکاف تشکیل شده است. - آخرین مورد در این لیست، عرض شکاف پیش فرض است. این پیش فرض است، بنابراین نیازی به تعیین شرط رسانه ندارید.
- شما می توانید هر تعداد عرض اسلات را که می خواهید فهرست کنید - تعداد تصاویر فهرست شده در
srcsetمهم نیست. عرض اسلات را می توان با استفاده از واحدهای مختلف مشخص کرد. موارد زیر همه عرضهای معتبر هستند:
100px33vw20emcalc(50vw-10px)
موارد زیر یک عرض معتبر نیست:
-
25%(درصدها را نمی توان با ویژگی اندازه ها استفاده کرد)