Zapytania o układ i media

AMP obsługuje zarówno zapytania o media, jak i o elementy, a do tego ma wbudowany, wydajny sposób kontroli układu poszczególnych elementów. Atrybut layout sprawia, że praca i tworzenie w pełni responsywnego projektu są o wiele łatwiejsze, niż gdyby używać samego CSS.

Obrazy responsywne, łatwe do wykonania

Twórz responsywne obrazy poprzez określenie atrybutów width i height, ustawienie układu na responsive i wskazanie zasobu obrazu do użycia za pomocą atrybutu srcset w zależności od różnych rozmiarów ekranu:

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

Ten element amp-img automatycznie dopasowuje się do szerokości elementu jego kontenera, a jego wysokość jest automatycznie ustawiana na współczynnik proporcji wyznaczony przez daną szerokość i wysokość. Wypróbuj go, zmieniając rozmiar tego okna przeglądarki:

TIP – See our side-by-side live demos of amp-img: Live Demos on AMP By Example.

Atrybut layout

Atrybut layout daje Ci łatwą kontrolę nad sposobem renderowania elementu na ekranie. Wiele z tych rzeczy jest możliwych dzięki czystemu CSS — jest to jednak znacznie trudniejsze i wymaga niezliczonych hacków. Lepiej zamiast tego użyć atrybutu layout.

Obsługiwane wartości atrybutu `layout`

W atrybucie layout można stosować następujące wartości:

Typ atrybutu layout	Szerokość / wysokość wymagana	Sposób działania
`nodisplay`	Nie	Element nie jest wyświetlany. Ten układ można zastosować do każdego elementu AMP. Element zajmuje zero miejsca na ekranie, tak jakby miał styl wyświetlania none. Zakłada się, że element może się wyświetlać wskutek działania użytkownika, na przykład `amp-lightbox`.
`fixed`	Tak	Element ma stałą szerokość i wysokość, bez obsługi responsywności. Jedynymi wyjątkami są elementy `amp-pixel` oraz `amp-audio`.
`responsive`	Tak	Rozmiary elementu są ustawiane na szerokość elementu kontenera i automatycznie zmieniana jest wysokość elementu wg proporcji podanych przez atrybuty width i height. Układ ten działa bardzo dobrze w przypadku większości elementów AMP, w tym `amp-img` i `amp-video`. Dostępne miejsce zależy od elementu nadrzędnego i można je również dostosować za pomocą CSS `max-width`. Uwaga: elementy z atrybutem {code 7}"layout=responsive" nie mają własnego rozmiaru. Rozmiar elementu jest określany na podstawie elementu jego kontenera. Aby zapewnić wyświetlanie elementu AMP, należy określić szerokość i wysokość elementu zawierającego. Nie należy określać `"display:table"` w elemencie zawierającym, ponieważ unieważnia to wyświetlanie elementu AMP, czyniąc element AMP niewidocznym.
`fixed-height`	Tylko wysokość	Element zajmuje dostępne dla niego miejsce, ale utrzymuje wysokość bez zmian. Ten układ działa dobrze w przypadku elementów takich jak `amp-carousel`, które zawierają treści rozmieszczone poziomo. Atrybut `width` nie może być obecny lub musi mieć wartość `auto`.
`fill`	Nie	Element zajmuje dostępne miejsce, zarówno na szerokość jak i wysokość. Innymi słowy, układ elementu wypełniającego odpowiada jego elementowi nadrzędnemu. Aby element wypełnił swój kontener nadrzędny, kontener ten musi mieć właściwość `position:relative` albo `position:absolute`.
`container`	Nie	Element pozwala swoim elementom podrzędnym określić jego rozmiar, podobnie jak zwykły `div` w HTML. Zakłada się, że składnik sam w sobie nie ma określonego układu, a jedynie działa jako kontener. Jego elementy podrzędne są renderowane natychmiast.
`flex-item`	Nie	Dany element i inne elementy w elemencie nadrzędnym zajmują pozostałe miejsce w kontenerze nadrzędnym, gdy jest to kontener elastyczny (tzn. `display:flex`). Rozmiar elementu jest określany przez element nadrzędny i liczbę innych elementów wewnątrz elementu nadrzędnego, zgodnie z właściwością CSS układu `display:flex`.
`intrinsic`	Tak	Element zajmuje dostępne dla niego miejsce i automatycznie zmienia wysokość wg współczynnika proporcji obrazu podanego przez atrybuty `width` i `height` aż do osiągnięcia naturalnego rozmiaru elementu albo osiągnięcia ograniczenia CSS (tj. max-width). Muszą być obecne atrybuty width i height. Układ ten działa bardzo dobrze w przypadku większości elementów AMP, w tym `amp-img`, `amp-carousel`, itd. Dostępne miejsce zależy od elementu nadrzędnego i można ją również dostosować za pomocą właściwości CSS `max-width`. Ten układ różni się od układu `responsive`, gdyż ma własną wysokość i szerokość. Jest to najbardziej widoczne w elemencie przestawianym, w którym układ `responsive` będzie renderować 0x0, a układ `intrinsic` będzie powiększany do osiągnięcia mniejszego z jego naturalnych rozmiarów lub ograniczenia CSS.

PORADA – przejdź na stronę Demonstrowanie układów AMP, aby zobaczyć jak różne układy reagują na zmianę rozmiaru ekranu.

Co jeśli szerokość i wysokość są nieokreślone?

W kilku przypadkach, jeśli atrybuty width lub height nie są określone, środowisko uruchomieniowe AMP może domyślnie ustawić następujące ich wartości:

amp-pixel: zarówno szerokość jak i wysokość są domyślnie ustawiane na 0.
amp-audio: domyślna szerokość i wysokość są podawane z przeglądarki.

Co jeśli atrybut `layout` jest nieokreślony?

Jeśli atrybut layout nie jest określony, AMP próbuje wyprowadzić lub odgadnąć odpowiednią wartość:

Zasada	Wywnioskowany układ
Atrybut `height` jest obecny, a atrybut `width` nie lub ma wartość `auto`	`fixed-height`
Atrybuty `width` lub `height` są obecne wraz z atrybutem `sizes`	`responsive`
Obecny jest zarówno atrybut `width`, jak i `height`	`fixed`
Nie ma ani atrybutu `width`, ani `height`	`container`

Stosowanie zapytań o media

Kwerendy medialne CSS

Użyj reguły @media, aby kontrolować wygląd i sposób działania układu strony, tak jak w przypadku każdej innej witryny. Gdy okno przeglądarki zmieni rozmiar lub orientację, zapytania o media są ponownie oceniane, a elementy są ukrywane i wyświetlane w zależności od nowych wyników.

CZYTAJ DALEJ – dowiedz się więcej na temat kontrolowania układu poprzez stosowanie kwerend medialnych z artykułu Używanie zapytań CSS o media w celu uzyskania responsywności.

Kwerendy elementu media

Jedną z dodatkowych funkcji w AMP jest atrybut media. Atrybut ten może być używany w każdym elemencie AMP; działa on podobnie do zapytań o media w globalnym arkuszu stylów, ale wpływa tylko na określony element na jednej stronie.

Tutaj na przykład mamy 2 zdjęcia z wzajemnie wykluczającymi się zapytaniami o media.

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

W zależności od szerokości ekranu, pobierane i renderowane będzie albo jedno, albo drugie.

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

Written by @Meggin
with contributions from @pbakaus