تعیین عرض چند شکاف

Katie Hempenius

این نسخه ی نمایشی را امتحان کنید

• برای پیش نمایش سایت، 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 مهم نیست.

• عرض اسلات را می توان با استفاده از واحدهای مختلف مشخص کرد. موارد زیر همه عرضهای معتبر هستند:

• 100px

• 33vw

• 20em

• calc(50vw-10px)

موارد زیر یک عرض معتبر نیست:

• 25% (درصدها را نمی توان با ویژگی اندازه ها استفاده کرد)