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 dell'area adatta i layout di pagina che utilizzano stile diversi (ovvero, larghezze delle immagini) per diverse dimensioni dell'area visibile.
Come specificare più larghezze dell'area
- Utilizza un elenco separato da virgole per specificare più larghezze di area. 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 dello slot può essere specificata utilizzando una varietà di unità. Di seguito sono riportate tutte le larghezze valide:
100px33vw20emcalc(50vw-10px)
La larghezza seguente non è valida:
25%(le percentuali non possono essere utilizzate con l'attributo taglie)