Come faccio a ottenere le immagini in modo corretto nella progettazione reattiva per i dispositivi mobili?

Question

Sto lavorando su una serie di siti Web mobili. Voglio che abbiano un bell'aspetto sui dispositivi di visualizzazione standard 320 x 480 e sui dispositivi di visualizzazione della retina 640 x 960. Quindi ho creato le immagini per avere un bell'aspetto su un display 640 x 960 e sto usando CSS reattivo per dimensionare le immagini. Sto facendo progressi e ho la parte di intestazione del sito molto vicino: Visualizza la pagina mobile

L'unico problema è che ci sono 1-2 pixel di spazio morto a destra. Nota: questo è più ovvio su un dispositivo mobile di quanto non sia in un browser Web ridimensionato.

Ecco HTML:

<ul id="header">
    <li id="full-site-link"><a href="index.html"><img src="/images-mobile/btn_head-full.png" alt="btn_head-full" /></a></li>
    <li id="mobile-logo"><a href="/"><img src="/images-mobile/btn_head-logo.png" alt="btn_head-logo" /></a></li>
    <li id="mobile-search"><a href="/mobile/search"><img src="/images-mobile/btn_head-search.png" alt="btn_head-search" /></a></li>
</ul>

Ecco il CSS:

#wrapper            { max-width: 480px; }

ul#header           { width: 100%; margin:0; padding:0; }
ul#header li        { display: inline; margin: 0; padding: 0; }
ul#header li a      { float:left; margin-bottom: -3px; padding:0; }

ul#header li#full-site-link a   { width: 21.71875%; }  /* 139 / 640 */
ul#header li#mobile-logo a      { width: 56.5625%;  }  /* 362 / 640 */
ul#header li#mobile-search a    { width: 21.71875%; }  /* 139 / 640 */

ul#header li a img      { max-width:100%; margin: 0; padding: 0; border: none; }

Se riesco a sbarazzarmi della brutta linea a destra della ricerca, sarò in buona forma.

Grazie!

Answer 1

Lo stai andando nel modo sbagliato, secondo me. Le immagini e il logo dei pulsanti devono essere trasparenti e il gradiente di sfondo deve essere applicato tramite CSS o un'immagine separata da 1px × 139px, a seconda dei requisiti per il supporto del browser.

Ciò ti consentirà di creare un layout più fluido, non vincolato dalle larghezze dei pixel, che funzionerebbe comunque anche se lo schermo avesse una strana risoluzione (come una console di giochi portatili).