تحديد عرض عدة فتحات

Katie Hempenius

جرِّب هذا الإصدار التجريبي

• لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط ملء الشاشة

• أعِد تحميل التطبيق في نوافذ المتصفح بأحجام مختلفة لمعرفة تحميل المتصفّح. صور مختلفة وتستخدم تخطيطات مختلفة بأحجام مختلفة للمتصفح.

عرض الرمز

• تحقق من 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% (لا يمكن استخدام النسب المئوية مع سمة الأحجام)