التخطيط واستعلامات الوسائط

يدعم AMP كلا من استعلامات الوسائط واستعلامات العناصر، كما يتم تزويده بأداة قوية مدمجة للتحكم في تخطيط العناصر الفردية. فيما تعمل سمة layout على تسهيل التعامل وإنشاء تصميم باستجابة كاملة كما لو أنك تستخدم CSS وحدها.

تسهيل إنشاء صور الاستجابة

يمكن إنشاء صور الاستجابة من خلال تحديد width وheight، وتعيين التخطيط إلى responsive، والإشارة باستخدام srcset إلى أي صورة يلزم استخدامها استنادًا إلى الأحجام المتباينة للشاشة:

<amp-img
    src="/img/narrow.jpg"
    srcset="/img/wide.jpg 640w,
           /img/narrow.jpg 320w"
    width="1698"
    height="2911"
    layout="responsive"
    alt="an image">
</amp-img>

يتلاءم العنصر amp-img هذا تلقائيًا مع عرض عنصر الحاوية الخاص به، ويتم تعيين ارتفاعه تلقائيًا على نسبة الأبعادة التي يتم تحديدها من خلال العرض والارتفاع المُعطى. جرب ذلك بتغيير حجم نافذة المتصفح هذه:

تلميح – راجع الشروحات الحية جنبًا إلى جنب لـ amp-img: الشروحات الحية حول توضيح AMP بالأمثلة.

سمة التخطيط

تمنحك سمة layout ميزة تحكم سهلة لكل عنصر بشأن كيفية عرض العنصر الخاص بك على الشاشة. يعتبر الكثير من هذه الأشياء ممكنًا مع CSS وحدها– لكنها عملية صعبة، وتطلب كمًا هائلا من الحيل. استخدم سمة layout بدلا من ذلك.

القيد المدعومة لسمة `layout`

The following values can be used in the layout attribute:

نوع التخطيط	العرض / الارتفاع المطلوب	السلوك
`nodisplay`	لا	لا يتم عرض العنصر. ويمكن تطبيق هذا التخطيط على كل عنصر من عناصر AMP. ولا يحتاج المكوّن إلى أي مساحة على الشاشة كما لو أن نمط العرض لا شيء. ومن المفترض إمكانية عرض العنصر تلقائيًا عند اتخاذ المستخدم أي إجراء، على سبيل المثال، `amp-lightbox`.
`fixed`	نعم	يحتوي العنصر على عرض وارتفاع ثابت مع عدم دعم التفاعل. تتمثل الاستثناءات الوحيدة في العنصرين `amp-pixel` و`amp-audio`.
`responsive`	نعم	تتم ملاءمة حجم العنصر مع عرض عنصر الحاوية الخاص به كما يتم تغيير حجم ارتفاعه تلقائيًا ليلائم نسبة الأبعاد المحددة من خلال سمتي العرض والارتفاع. ويعمل هذا التخطيط بشكل جيد جدًا مع أغلب عناصر AMP، بما في ذلك `amp-img`، و`amp-video`. تعتمد المساحة المتاحة على العنصر الأصل ويمكن أيضًا تخصيصها باستخدام `max-width` CSS. ملاحظة: العناصر بالتخطيط `"layout=responsive"` ليس لها حجم فطري. يتم تحديد حجم العنصر من عنصر الحاوية الخاص به. لضمان عرض عنصر AMP الخاص بك، يجب أن تحدد قيمة عرض وارتفاع لعنصر الحاوية. لا تحدد `"display:table"` على عنصر الحاوية لأن هذا يتجاوز عرض عنصر AMP، ما يؤدي إلى تحويل عنصر AMP إلى غير مرئي.
`fixed-height`	الارتفاع فقط	يحتل العنصر المساحة المتاحة له ولكنه يحتفظ بالارتفاع دون تغيير. ويعمل هذا التخطيط بشكل جيد مع عناصر مثل `amp-carousel` الذي يتضمن المحتوى الموضوع بشكل أفقي. ويجب ألا تكون السمة `width` موجودة أو يجب أن تكون مساوية لـ `auto`.
`fill`	لا	يشغل العنصر المساحة المتاحة له، سواءً العرض أو الارتفاع. وبعبارة أخرى، يطابق تخطيط عنصر الملء الأصل الخاص به. ولكي يملأ أحد العناصر الحاوية الأصل له، تأكد من أن الحاوية الأصل تحدد `position:relative` أو `position:absolute`.
`container`	لا	يتيح العنصر لعناصره الفرعية تحديد حجمه، تمامًا مثل `div` لـ HTML المعتاد. ويُفترض ألا يحتوي المكوّن على تخطيط محدد له ولكن يعمل كحاوية فقط. ويتم عرض عناصره الفرعية مباشرة.
`flex-item`	لا	يشغل العنصر والعناصر الأخرى في الأصل الخاص به المساحة المتبقية في الحاوية الأصل عند يكون الأصل حاوية مرنة (أي الحاوية `display:flex`). يتم تحديد حجم العنصر بواسطة العنصر الأصل وعدد العناصر الأخرى داخل الأصل وفقًا لتخطيط `display:flex` من CSS.
`intrinsic`	نعم	يشغل العنصر المساحة المتوفرة له ويغير حجم ارتفاعه تلقائيًا حسب نسبة الأبعاد المقدمة من سمتي `width` و`height`حتى يصل إلى الحجم الطبيعي للعنصر أو القيد الخاص بـ CSS (على سبيل المثال أقصى عرض). يجب أن تكون سمتي العرض والارتفاع موجودتين. يعمل هذا التخطيط جيدًا مع معظم عناصر AMP، يشمل ذلك `amp-img` و`amp-carousel`، وغيره. وتعتمد المساحة المتوفرة على العنصر الأصل ويمكن أيضًا تخصيصه باستخدام `max-width` من CSS. يختلف هذا التخطيط عن `responsive` باحتوائه على قيمة ارتفاع وعرض مضمنة. وهذا يظهر في الغالب مع العنصر العائم حيث يعرض التخطيط `responsive` قيمة 0x0 ويتضخم التخطيط `intrinsic` إلى قيمة أصغر من حجمه الأصلي أو إلى أي قيد من CSS.

تلميح– زر صفحة توضيح تخطيطات AMP لمعرفة كيف تستجيب التخطيطات المتنوعة لتغير حجم الشاشة.

ماذا لو كان العرض والارتفاع غير حدد؟

في حالات قليلة إذا كان width أو height غير محدد، فأن وقت تشغيل AMP يمكن استعمال القيم الافتراضية كالتالي:

amp-pixel: تعيين القيمة الافتراضية لكل من width و height إلى 0.
amp-audio: يتم استنتاج قيمة width وheight الافتراضية من المستعرض.

ماذا لو كان السمة `layout` غير محددة؟

إذا كانت سمة layout غير محددة، فإن AMP يحاول استنتاج أو تخزين القيمة المناسبة:

القاعدة	التخطيط المستنتج
قيمة `height` موجودة وقيمة `width` غير موجودة أو تساوي `auto`	`fixed-height`
السمتان `width` أو `height` موجودتان إلى جانب السمة `sizes`	`responsive`
كلا السمتان `width` و`height` موجودتان	`fixed`
قيمة `width` و`height` غير موجودة	`container`

استخدام استعلامات الوسائط

استعلامات وسائط CSS

يمكنك استخدام @media للتحكم في مظهر وسلوك تخطيط الصفحة، وذلك مثلما تفعل على أي موقع ويب آخر. عند تغيّر حجم نافذة المتصفّح أو اتجاهها، تتم إعادة تقييم استعلامات الوسائط ويتم إخفاء العناصر وعرضها بناءً على النتائج الجديدة.

تعرّف على المزيد من المعلومات حول التحكم في التخطيط من خلال تطبيق استعلامات الوساط في استخدام استعلامات وسائط CSS للاستجابة.

استعلامات وسائط العناصر

من الميزات الإضافية في تصميم الاستجابة المتوفر في AMP سمة media. يمكن استخدام هذه السمة على كل عنصر AMP؛ إنها تعمل بطريقة مماثلة لاستعلامات الوسائط في صفحة الأنماط العمومية الخاصة بك، ولكنها تؤثر فقط على عنصر محدد في صفحة فردية.

على سبيل المثال، هنا لدينا صورتان باستعلامات وسائط تستبعد إحداهم الأخرى.

<amp-img
    media="(min-width: 650px)"
    src="wide.jpg"
    width="527"
    height="355"
    layout="responsive">
</amp-img>

تبعًا لعرض الشاشة، سيتم جلب وعرض واحدة أو الأخرى.

<amp-img
    media="(max-width: 649px)"
    src="narrow.jpg"
    width="466"
    height="193"
    layout="responsive">
</amp-img>

Written by @Meggin
with contributions from @pbakaus