Prova questa demo
Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi Schermo intero
.Ricarica l'app in finestre del browser di dimensioni diverse per visualizzare il caricamento del browser immagini diverse e usare layout diversi con browser di dimensioni differenti.
Visualizza il codice
- Effettua il pagamento su
index.htmlper trovare il codice che consente il funzionamento:
<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" su aree visibili fino a 480 px di larghezza, "il 50% dell'area visibile
larghezza" su schermi di larghezza compresa tra 481 e 1024 px e di 800 px su schermi di larghezza superiore a 1024 px. Questi
corrispondono a quelle specificate nel CSS.
La possibilità di specificare più larghezze dell'area adatta i layout di pagina che utilizzano stili diversi (ovvero larghezze delle immagini) per aree visibili di dimensioni diverse.
Come specificare più larghezze dell'area
- Utilizza un elenco separato da virgole per specificare più larghezze di area. Ogni voce dell'elenco
ad eccezione dell'ultimo elemento, è costituito da una condizione multimediale (ad esempio
max-widthomin-width) e una larghezza dell'area. - L'ultimo elemento di questo elenco è la larghezza predefinita dell'area annuncio. È l'impostazione predefinita, quindi non è necessario specificare una condizione multimediale.
- Puoi elencare tutte le larghezze dell'area che vuoi, ovvero il numero di immagini elencato in
srcsetnon importa. La larghezza dello slot può essere specificata utilizzando diverse unità. Le seguenti sono tutte larghezze valide:
100px33vw20emcalc(50vw-10px)
La seguente larghezza non è valida:
25%(non è possibile utilizzare le percentuali con l'attributo dimensioni)