تجربة هذا الإصدار التجريبي
لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة
.أعِد تحميل التطبيق في نوافذ متصفّح مختلفة الأحجام لمعرفة ما إذا كان المتصفّح يحمّل صورًا مختلفة ويستخدم تنسيقات مختلفة عند تغيير حجم المتصفّح.
عرض الرمز
- يمكنك الاطّلاع على
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% of the viewport width" (100% من عرض إطار العرض) على إطارات العرض التي يصل عرضها إلى 480 بكسل، و"50% of the viewport
width" (50% من عرض إطار العرض) على الشاشات التي يتراوح عرضها بين 481 و1024 بكسل، و800 بكسل على الشاشات التي يزيد عرضها عن 1024 بكسل. تتطابق هذه
العرض مع القيم المحدّدة في CSS.
تتيح إمكانية تحديد عدة قيم لعرض الفتحات تنسيقات الصفحات التي تستخدم نمطًا مختلفًا (أي عرض الصور) لأحجام مختلفة لإطار العرض.
كيفية تحديد عدة سمات لعرض الفتحات
- استخدِم قائمة مفصولة بفواصل لتحديد عدة قيم لعرض الفتحة. يتكون كل عنصر في القائمة،
باستثناء العنصر الأخير، من حالة وسائط (مثل
max-widthأوmin-width) وعرض خانة. - العنصر الأخير في هذه القائمة هو عرض الشريحة التلقائي. وهو الإعداد التلقائي، لذا لست بحاجة إلى تحديد شرط وسائط.
- يمكنك إدراج عدد كبير من مساحات الإعلانات كما تريد، ولا يهم عدد الصور المدرَجة في
srcset. يمكن تحديد عرض الفتحة باستخدام مجموعة متنوعة من الوحدات. في ما يلي كلّ العرض الصالحة:
100px33vw20emcalc(50vw-10px)
العرض التالي غير صالح:
25%(لا يمكن استخدام النسب المئوية مع سمة المقاسات)