تجربة هذا الإصدار التجريبي
لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة
.أعِد تحميل التطبيق في نوافذ متصفّح مختلفة الأحجام لمعرفة ما إذا كان المتصفّح يحمّل صورًا مختلفة ويستخدم تنسيقات مختلفة عند تغيير حجم المتصفّح.
عرض الرمز
- تحقق من
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%(لا يمكن استخدام النسب المئوية مع سمة المقاسات)