Comment faire pour que les images soient correctement dimensionnées dans une conception réactive pour appareils mobiles?

StackOverflow https://stackoverflow.com/questions/9381110

  •  28-10-2019
  •  | 
  •  

Question

Je travaille sur un certain nombre de sites Web mobiles.Je veux qu'elles soient bonnes sur les périphériques d'affichage standard 320 x 480 et sur les périphériques d'affichage Retina 640 x 960. J'ai donc créé les images pour qu'elles soient bonnes sur un écran 640 x 960 et j'utilise le CSS réactif pour dimensionner les images.Je progresse et j'ai la partie d'en-tête du site très proche: afficher la page mobile

Le seul problème est qu'il y a 1 à 2 pixels d'espace mort à droite.Remarque: cela est plus évident sur un appareil mobile que dans un navigateur Web redimensionné.

Voici le 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>

Voici le 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 je peux simplement me débarrasser de la mauvaise ligne à droite de la recherche, je serai en bonne forme.

Merci!

Était-ce utile?

La solution

À mon avis, vous ne parlez pas de la bonne manière.Les images de vos boutons et votre logo doivent être transparents et le dégradé d'arrière-plan doit être appliqué via CSS ou une image 1px × 139px séparée, en fonction de vos besoins en matière de prise en charge du navigateur.

Cela vous permettra de créer une mise en page plus fluide, non contrainte par la largeur des pixels, qui fonctionnerait toujours même si l'écran avait une résolution étrange (comme une console de jeux portable).

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top