Prova questa demo
Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi A schermo intero
.Ricarica l'app in finestre del browser di dimensioni diverse per vedere come il browser carica immagini diverse e utilizza layout diversi a seconda delle dimensioni del browser.
Visualizza il codice
- Visita la pagina
index.htmlper il codice che rende possibile questa 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 indica che la larghezza di visualizzazione dell'immagine sarà:
"100% della larghezza dell'area visibile" per le aree visibili fino a 480 px di larghezza, "50% della larghezza
dell'area visibile" per gli schermi di larghezza compresa tra 481 e 1024 px e 800 px per gli schermi più ampi di 1024 px. Queste larghezze corrispondono a quelle specificate nel CSS.
La possibilità di specificare più larghezze degli slot consente di utilizzare layout di pagina che impiegano stili diversi (ovvero larghezze delle immagini) per dimensioni del viewport diverse.
Come specificare più larghezze di area
- Utilizza un elenco separato da virgole per specificare più larghezze degli slot. Ogni elemento dell'elenco,
tranne l'ultimo, è costituito da una condizione multimediale (ad es.
max-widthomin-width) e da una larghezza dello slot. - L'ultimo elemento di questo elenco è la larghezza predefinita della sezione. È il valore predefinito, quindi non è necessario specificare una condizione multimediale.
- Puoi elencare tutte le larghezze degli slot che vuoi. Il numero di immagini elencate in
srcsetnon ha importanza. La larghezza della scanalatura può essere specificata utilizzando una serie di unità di misura. Di seguito sono riportate tutte le larghezze valide:
100px33vw20emcalc(50vw-10px)
La seguente larghezza non è valida:
25%(le percentuali non possono essere utilizzate con l'attributo taglie)