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.


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


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

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub