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

Styl i układ

Określanie stylów i układ na stronach AMP HTML jest bardzo podobne jak w przypadku zwykłych stron HTML — w obu przypadkach będziesz używać CSS.

Ze względu na wydajność i użyteczność, AMP ogranicza niektóre style CSS i całkowitą liczbę bajtów do 75 000 na jedną stronę. AMP rozszerza jednak możliwości responsywnego projektowania o funkcje takie jak: symbole zastępcze i zasoby rezerwowe, zaawansowane sterowanie grafiką przy użyciu atrybutu srcset oraz atrybut layout zwiększający kontrolę nad sposobem wyświetlania elementów.

PORADA — w AMP bardzo łatwo jest tworzyć elementy responsywne. Wystarczy umieścić w nich layout="responsive". Aby dowiedzieć się więcej o projektowaniu elementów responsywnych w AMP, przejdź do artykułu Tworzenie responsywnych stron AMP.

Dodaj style do strony

Każda strona AMP ma limit 75 000 bajtów kodu CSS. Style zdefiniowane w nagłówku dokumentu i inline liczą się do tego limitu.

Definiowanie stylów w sekcji head

Zdefiniuj CSS w znaczniku <style amp-custom> w sekcji head dokumentu. W każdej stronie AMP dozwolony jest tylko jeden znacznik <style amp-custom>.

 <!doctype html>

       ...     <style amp-custom=""><br>      /* any custom styles go here. */<br>      body {<br>        background-color: white;<br>      }<br>      amp-img {<br>        border: 5px solid black;<br>      }<br></style>


wzxhzdk:0



Składniki AMP i elementy HTML można stylizować za pomocą klas lub selektorów przy użyciu typowych właściwości CSS:

   <p>Hello, Kitty.</p>   {amp-img1}   {/amp-img1}  

Definiowanie stylów inline

W AMP można stosować style inline:

   <p style="color:pink;margin-left:30px;">Hello, Kitty.</p>  

Każde wystąpienie stylu inline ma limit 1000 bajtów. Style inline liczą się do całkowitego limitu 75 000 bajtów.

Responsywne rozmieszczanie elementów

Określ rozmiar i położenie wszystkich widocznych elementów AMP poprzez podanie atrybutów width i height. Atrybuty te określają współczynnik proporcji elementu, który można następnie skalować wraz z kontenerem.

Ustaw układ jako responsywny. Rozmiar elementu jest wskutek tego dopasowany do szerokości elementu jego kontenera i automatycznie zmienia jego wysokość zgodnie z współczynnikiem proporcji podanym za pomocą atrybutów width i height.

CZYTAJ DALEJ — dowiedz się więcej o układach obsługiwanych w AMP

Stosowanie symboli zastępczych i zasobów rezerwowych

Wbudowana obsługa symboli zastępczych i zasobów rezerwowych oznacza, że użytkownicy nigdy więcej nie będą musieli wpatrywać się w pusty ekran.

CZYTAJ DALEJ — dowiedz się więcej o symbolach zastępczych zasobach rezerwowych

Kontrola zasobów obrazów

AMP obsługuje zarówno atrybuty srcset jak i sizes, aby dać Ci szczegółową kontrolę nad obrazami, które mają być ładowane w poszczególnych scenariuszach.

CZYTAJ DALEJ — dowiedz się więcej o kontrolowaniu grafiki za pomocą atrybutów srcset i sizes

Walidacja stylów i układu

Użyj walidatora AMP do testowania wartości CSS i układu strony.

Walidator sprawdza, czy CSS strony nie przekracza limitu 75 000 bajtów, czy strona zawiera niedozwolone style i czy układ strony jest obsługiwany oraz poprawnie sformatowany. Zobacz również pełną listę Błędy stylu i układu strony.

Przykładowy błąd w konsoli, dotyczący strony z kodem CSS, który przekracza limit 75 000 bajtów:

CZYTAJ DALEJ — dowiedz się więcej o walidacji i naprawie stron AMP