Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP

amp-layout

Description

The amp-layout` component allows you to apply aspect-ratio based responsive layouts to any element. The `amp-layout` component works similarly to the layout.

الوصف عنصر حاوية عام متعدد الأغراض يطبّق تنسيقات AMP القوية على أي عنصر.
التنسيقات المعتمدة container وfill وfixed وfixed-height وflex-item وintrinsic وresponsive

نظرة عامة

يتيح لك المكّوِن amp-layout تطبيق تصميمات استجابة تستند إلى نسبة العرض إلى الارتفاع على أي عنصر. يعمل المكوِّن amp-layout بشكل مشابه للسمة layout على مكونات AMP الموجودة لكنه يتيح عمل ترميز HTML كعناصر ثانوية. وتعمل جميع التنسيقات الأخرى مع amp-layout (مثل fixed-height وfixed وغيرها).

مثال

يستخدم المثال amp-layout لإنشاء حاوية استجابة حول دائرة مرسومة بالتنسيق SVG المضمّن.

<amp-layout layout="responsive" width="1" height="1">
  <svg viewBox="0 0 100 100">
    <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
    Sorry, your browser does not support inline SVG.
  </svg>
</amp-layout>

السمات

يتضمن هذا العنصر السمات المشتركة التي تشمل مكونات AMP.

التحقق

اطِّلع على قواعد amp-layout في مواصفات مدقق AMP.

هل تحتاج إلى مزيد من المساعدة؟

لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.

الذهاب إلى Stack Overflow
هل وجدت خطأ أو تفتقد لميزة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

الانتقال إلى GitHub