sì, usando la tecnica sprite carichi una sola immagine, ma il tuo css e il codice html sono più pesanti e soprattutto dovrai costruire un'altra immagine ridotta e ricalcolare tutte le posizioni. Ti mostro un esempio (fatto con le immagini ritagliate, perché così l'ho approntato prima di leggere la tua risposta):
html per tutti i dispositivi
codice:
<div id="wrapper">
<div id="logo">
[img]logo.png[/img]
</div>
<div id="error">
[img]404.png[/img]
Page not found. Sorry!
The requested URL was not found on this server.</p>
</div>
</div>
css per pc:
codice:
#wrapper {
width:575px;
margin:10% auto 0 auto;
}
#logo {
text-align:center;
}
#logo img {
width:296px;
height:104px;
}
#error {
height:111px;
padding:10px;
overflow:hidden;
line-height:1.5em
}
#img404 {
float:left;
width:112px;
height:111px;
margin-right:30px;
}
mentre il css per i dispositivi mobili varierebbe le dimensioni del wrapper, del div error, del logo e dell'immagine di errore e avrebbe un display:none sul paragrafo.
Se vuoi mantenere i cinque sfondi per l'immagine 404, puoi mantenere questo schema, al posto dell'immagine 404 inserisci un div o un altro paragrafo con float left, assegnagli una larghezza e assegna una larghezza anche al paragrafo che segue.
Nel css per dispositivi mobili l'elemento con l'immagine di errore avrà larghezza settata su auto e il testo affiancato un display:none
Rispondi quotando
