Prova questa demo
Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero
.Ricarica l'app in finestre del browser di dimensioni diverse per vedere che il browser carica immagini diverse e utilizza layout diversi a seconda delle dimensioni del browser.
Visualizza il codice
- Controlla
index.htmlper il codice che esegue l'operazione:
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
Che succede qui?
Il valore dell'attributo sizes determina che la larghezza di visualizzazione dell'immagine sarà:
"100% della larghezza dell'area visibile" su aree visibili fino a 480 px di larghezza, "50% della larghezza dell'area visibile" su schermi larghi 481-1024 px e 800 px su schermi larghi più di 1024 px. Queste larghezze corrispondono a quelle specificate nel CSS.
La possibilità di specificare più larghezze dell'area annuncio consente layout di pagina che utilizzano stili diversi (ovvero, larghezze dell'immagine) per diverse dimensioni dell'area visibile.
Come specificare più larghezze dell'area annuncio
- Utilizza un elenco separato da virgole per specificare la larghezza di più aree annuncio. Ogni elemento dell'elenco,
tranne l'ultimo, è costituito da una condizione del supporto (ad es.
max-widthomin-width) e da una larghezza dell'area annuncio. - L'ultimo elemento dell'elenco è la larghezza predefinita dell'area annuncio. È l'impostazione predefinita, quindi non è necessario specificare una condizione per il supporto.
- Puoi elencare tutte le larghezze di slot che vuoi; il numero di immagini elencate in
srcsetnon è importante. La larghezza dell'area può essere specificata utilizzando diverse unità. Di seguito sono riportate tutte le larghezze valide:
100px33vw20emcalc(50vw-10px)
La larghezza seguente non è valida:
25%(non è possibile utilizzare le percentuali con l'attributo dimensioni)