Creare pagine AMP reattive
È facilissimo creare elementi reattivi in AMP. È sufficiente inserire layout=responsive.
Creare immagini reattive
Tutte le risorse caricate esternamente, incluse le immagini, devono avere posizione e dimensioni specifiche in modo che, quando vengono caricate, la pagina non salti e non si adatti dinamicamente.
Per creare immagini reattive, specifica la larghezza e l'altezza, imposta il layout reattivo e utilizza srcset per indicare quale asset di immagine utilizzare in base alle dimensioni dello schermo:
<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>
Questo elemento amp-img si adatta automaticamente alla larghezza del relativo elemento contenitore, mentre la sua altezza viene impostata automaticamente in base alle proporzioni stabilite secondo la larghezza e l'altezza indicate:
Visita anche la pagina amp-img del sito AMP by Example.
Aggiungere stili a una pagina
Aggiungi tutti gli stili all'interno del tag <style amp-custom> nella sezione head del documento.
Ad esempio:
<!doctype html> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1