AMP

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>