Prova questa demo
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero
. - Ricarica l'app utilizzando dimensioni del browser diverse. Nota quanto sono diverse le immagini: non solo hanno dimensioni diverse, ma anche ritagli e proporzioni diverse.
Che succede qui?
L'art director mostra immagini diverse su schermi di dimensioni differenti.
Un'immagine adattabile carica dimensioni diverse della stessa immagine. L'art director fa un ulteriore passo in avanti e carica immagini completamente diverse a seconda del display.
Usare le indicazioni artistiche per migliorare la presentazione visiva. Ad esempio, le diverse immagini ritagliate in questa demo assicurano che il punto d'interesse (il fiore) venga sempre mostrato in dettaglio, indipendentemente dal display. I vantaggi dell'art director sono puramente estetici, non offrono alcun vantaggio in termini di rendimento rispetto alle immagini adattabili.
Visualizza il codice
- Visualizza
index.htmlper vedere il codice di art director per questa demo.
Come funziona il codice
Art Director utilizza i tag <picture>, <source> e <img>.
immagine
Il tag <picture> fornisce un wrapper per zero o più tag <source> e un tag <image>.
fonte
Il tag <source> specifica una risorsa multimediale.
Il browser utilizza il primo tag <source> con una query multimediale che restituisce true. Se nessuna delle query supporti corrisponde, il browser torna al caricamento dell'immagine specificata da <img>.
di apertura.
img
Il tag <img> fa funzionare questo codice sui browser che non supportano il tag <picture>.
Se un browser non supporta il tag <picture>, carica l'immagine specificata dal tag <img>.