¿Cómo consigo que las imágenes diminezcan correctamente en el diseño receptivo para dispositivos móviles?

Question

Estoy trabajando en varios sitios web móviles. Quiero que se vean bien en dispositivos de pantalla estándar 320 x 480 y en dispositivos de pantalla Retina 640 x 960. Así que creé las imágenes para que se vean bien en una pantalla de 640 x 960 y estoy usando CSS receptivo para dimensionar las imágenes. Estoy progresando y tengo la parte del encabezado del sitio muy cerca: Ver página móvil

El único problema es que hay 1 a 2 píxeles de espacio muerto a la derecha. Nota: Esto es más obvio en un dispositivo móvil que en un navegador web redimensional.

Aquí está el 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>

Aquí está el 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; }

Si puedo deshacerme de la línea desagradable a la derecha de la búsqueda, estaré en buena forma.

¡Gracias!

Answer 1

Vas a esto de la manera incorrecta, en mi opinión. Las imágenes y el logotipo de su botón deben ser transparentes y el gradiente de fondo debe aplicarse a través de CSS o una imagen separada de 1PX × 139px, dependiendo de sus requisitos para el soporte del navegador.

Esto le permitirá crear un diseño más fluido, no limitado por los anchos de píxeles, eso aún funcionaría incluso si la pantalla tuviera una resolución extraña (como una consola de juegos portátil).