AMP

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

يدعم 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>