Layout & Medienabfragen

AMP unterstützt sowohl Medienabfragen als auch Elementabfragen und verfügt über eine leistungsstarke, integrierte Methode zur Steuerung des Layouts einzelner Elemente. Im Vergleich zur ausschließlichen Verwendung von CSS macht das Attribut layout es erheblich einfacher, ein responsives Design zu erstellen und damit zu arbeiten.

Responsive Bilder leicht gemacht

Erstelle wie folgt responsive Bilder: Gib width und height an, setze das Layout auf responsive und lege durch srcset fest, welches Bildobjekt auf unterschiedlichen Bildschirmgrößen verwendet werden soll:

<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>

Dieses amp-img Element passt sich automatisch der Breite seines Containerelements an und seine Höhe wird automatisch auf das Seitenverhältnis eingestellt, das durch die vorgegebene Breite und Höhe bestimmt ist. Probiere es aus, indem du die Größe dieses Browserfensters änderst:

TIPP: Sieh dir unsere Side-by-Side Live Demos zu amp-img an: Live Demos bei AMP By Example.

Das Attribut "layout"

Mit dem Attribut layout kannst du ganz einfach steuern, wie ein bestimmtes Element auf dem Bildschirm gerendert werden soll. Viele dieser Dinge sind auch mit reinem CSS machbar – aber sie sind viel schwieriger und erfordern eine Vielzahl von Hacks. Verwende stattdessen das Attribut layout.

Unterstützte Werte für das Attribut `layout`

Die folgenden Werte können im Attribut layout verwendet werden:

Typ des Layouts	Breite/ Höhe erforderlich	Verhalten
`nodisplay`	Nein	Das Element wird nicht angezeigt. Dieses Layout kann auf jedes AMP Element angewendet werden. Die Komponente nimmt auf dem Bildschirm keinen Platz ein, als hätte sie keinen Display Style. Es wird angenommen, dass sich das Element bei einer Benutzeraktion selbst anzeigen kann (z. B. `amp-lightbox`).
`fixed`	Ja	Das Element hat eine feste Breite und Höhe. Responsivität wird nicht unterstützt. Die einzigen Ausnahmen sind die Elemente `amp-pixel` und `amp-audio`.
`responsive`	Ja	Das Element wird an die Breite seines Containerelements angepasst und seine Höhe automatisch an das Seitenverhältnis, das durch die Attribute width und height angegeben ist. Dieses Layout funktioniert für die meisten AMP Elemente sehr gut, einschließlich `amp-img` und `amp-video`. Der verfügbare Platz ist vom übergeordneten Element abhängig und kann auch mithilfe der CSS Eigenschaft `max-width` angepasst werden. Hinweis: Elemente mit `"layout=responsive"` haben keine intrinsische Größe. Die Größe des Elements wird von seinem Containerelement bestimmt. Um sicherzustellen, dass dein AMP Element angezeigt wird, musst du eine Breite und Höhe für das enthaltende Element angeben. Gib für das enthaltende Element nicht `"display:table"` an, da dies die Anzeige des AMP Elements überschreibt und das AMP Element unsichtbar macht.
`fixed-height`	Nur Höhe	Das Element nimmt den verfügbaren Platz ein, behält jedoch eine unveränderte Höhe bei. Dieses Layout eignet sich gut für Elemente wie `amp-carousel`, bei denen der Inhalt horizontal positioniert ist. Das Attribut `width` darf nicht vorhanden sein oder muss den Wert `auto` haben.
`fill`	Nein	Das Element nimmt den verfügbaren Platz ein, sowohl Breite als auch Höhe. Mit anderen Worten: Das Layout eines Füllelements entspricht dem übergeordneten Element. Damit ein Element seinen übergeordneten Container füllen kann, musst du sicherstellen, dass der übergeordnete Container "position:relative" oder "position:absolute" angibt.
`container`	Nein	Untergeordnete Elemente können die Größe des Elements definieren, ähnlich wie ein normales HTML `div`. Es wird angenommen, dass die Komponente selbst kein bestimmtes Layout hat, sondern nur als Container agiert. Seine untergeordneten Elemente werden sofort gerendert.
`flex-item`	Nein	Das Element und andere Elemente in seinem übergeordneten Element nehmen den verbleibenden Platz des übergeordneten Containers ein, wenn das übergeordnete Element ein flexibler Container ist (d. h. `display:flex`). Die Elementgröße wird durch das übergeordnete Element und die Anzahl der anderen Elemente im übergeordneten Element bestimmt (gemäß dem CSS Layout `display:flex`).
`intrinsic`	Ja	Das Element nimmt den verfübaren Platz ein und passt seine Höhe automatisch an das Seitenverhältnis an, das durch die Attribute `width` und `height` vorgegeben ist, bis es die natürliche Größe des Elements oder eine CSS Einschränkung (z. B. max-width) erreicht. Die Attribute width und height müssen vorhanden sein. Dieses Layout funktioniert für die meisten AMP Elemente sehr gut, einschließlich `amp-img`, `amp-carousel` usw. Der verfügbare Platz hängt vom übergeordneten Element ab und kann auch mithilfe der CSS Eigenschaft `max-width` angepasst werden. Dieses Layout unterscheidet sich von `responsive` durch eine intrinsische Höhe und Breite. Am deutlichsten ist dies an einem schwebenden Element zu erkennen, bei dem das Layout `responsive` die Größe als 0x0 rendert und das Layout `intrinsic` eine Vergrößerung auf die kleinste natürliche Größe oder auf die CSS Einschränkung bewirkt.

TIP: Besuche die Seite Demonstration von AMP Layouts, um zu sehen, wie die verschiedenen Layouts auf eine Größenänderung des Bildschirms reagieren.

Was, wenn Breite und Höhe nicht definiert sind?

TIPP: Besuche die Seite Demonstration von AMP Layouts, um zu sehen, wie die verschiedenen Layouts auf eine Größenänderung des Bildschirms reagieren.

amp-pixel: Breite und Höhe werden standardmäßig auf 0 gesetzt.
amp-audio: Die standardmäßige Breite und Höhe werden vom Browser abgeleitet.

Was, wenn das Attribut `layout` nicht angegeben ist?

Wenn das Attribut layout nicht angegeben ist, versucht AMP, den entsprechenden Wert abzuleiten oder zu schätzen:

Regel	Abgeleitetes Layout
`height` ist vorhanden und `width` fehlt oder entspricht `auto`	`fixed-height`
Die Attribute `width` oder `height` und das Attribut `sizes` sind vorhanden	`responsive`
Die Attribute `width` und `height` sind vorhanden	`fixed`
`width` und `height` fehlen	`container`

Verwendung von Medienabfragen

CSS Medienabfragen

Verwende @media, um zu steuern, wie das Seitenlayout aussieht und sich verhält – genau wie du es auf jeder anderen Website tun würdest. Wenn sich die Größe oder Ausrichtung des Browserfensters ändert, werden die Medienabfragen neu ausgewertet und Elemente werden basierend auf den neuen Ergebnissen ausgeblendet oder angezeigt.

ERFAHRE MEHR: Unter Use CSS media queries for responsiveness erfährst du mehr darüber, wie das Layout durch Medienabfragen gesteuert wird.

Medienabfragen für Elemente

Ein zusätzliches Merkmal des responsiven Designs in AMP ist das Attribut media. Dieses Attribut kann für jedes AMP Element verwendet werden. Es funktioniert ähnlich wie Medienabfragen in deinem globalen Stylesheet, wirkt sich jedoch nur auf das jeweilige Element auf einer einzelnen Seite aus.

Hier haben wir zum Beispiel zwei Bilder mit sich gegenseitig ausschließenden Medienabfragen.

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

Abhängig von der Bildschirmbreite wird das jeweils eine oder andere abgerufen und gerendert.

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

Written by @Meggin
with contributions from @pbakaus