1476 sujets

Web Mobile et responsive web design

Bonjour,

Je suis plutôt débutante, mais je réalise un site internet et j'ai appris pour cela les bases de HTML et CSS.

Pour la quasi totalité des pages de mon site, j'ai utilisé le système grid afin d'avoir le design le plus responsive possible. Je suis en ce moment en train de choisir la taille des images et du texte qui se trouvent dans ces grids et je me pose une question :

Pour les images, est-il fonctionnel d'indiquer leur taille en pourcentage, sachant qu'elles se trouvent dans une grid ? Auparavant, j'avais indiqué leur taille en pixels, mais j'ai peur que cela pose des problèmes d'adaptation à différentes tailles d'écran.

(Pour le texte, j'indique la taille de la police en em.)

D'avance, merci de votre attention Smiley smile
Laure
Administrateur
Hello,

Si tu indiques des tailles en % tu risques de les voir s'agrandir voire se déformer.

De toute façon, une image a des dimensions intrinsèques en pixels donc autant lui laisser des pixels. Que tu sois dans Grid Layout n'y change rien.

Par contre, la bonne pratique est de leur imposer une taille maximale pour éviter qu'elles débordent de leur parent. Par exemple ainsi :


img {
  max-width: 100%;
  height: auto;
}


Et pour le texte, les "em" sont une bonne unité mais dépendante de la cascade. Peut-être pourrais-tu envisager d'utiliser des "rem", moins variables.
Meilleure solution
Bonsoir,

Ok, je vais faire ce que tu me conseilles pour les images - pixels et indiquer une taille maximale -, et pour le texte, plutôt "rem" que "em".

Merci beaucoup !