css et résolution d'écran : %, px, js... Résolu/Fermé

Question

Bonjour,
Faisant mon 1er site, j'ai bien entendu pleins de petits problèmes de novice (lol).
Notamment au niveau de l'adaptabilité pour les différents types de résolution.
Ma question est la suivante :

Pour vous c'est mieux de tout (vraiment tout, taille des images, de la police...) définir en %, ou préférez vous laisser en pixel et mettre un javascript détectant la résolution (au risque que les javascripts soient désactivés coté client).

Merci de réagir

Jean_2

bzh56 · Answer

Bonjour,

Je ne sais pas s'il existe une règle générale... voila ce que je fais :

pour la mise en page :
Que ce soit lorsque j'ai reccours à des TABLE ou à des DIV, j'utilise les %.
Attention, IE mange systématiquement 1% de la largeur, il faut donc que le total de tes largeurs n'excède pas 99%.
Il faut aussi tenir compte du fait que les MARGIN et PADDING sont ajoutés à ces valeurs... là, il faut faire des tests et se fixer une règle précise d'espaces entre les zones de façon à toujours savoir où tu en es.

pour les images :
Si tu donnes les valeurs en %, elles seront redimentionnées localement, au gré de la définition d'écran de ton visiteur, attends toi à des surprises...
Si ton image fait 40px de largeur d'origine sur ta résolution d'écran à 800x600 (ce n'est qu'un exemple...), un visiteur disposant d'une largeur de 1023px la verra avec 50.8.......px, elle sera pixélisée. Si c'est l'inverse, il la verra avec 31.2.....px de large. Comme 40 et 31.2... n'ont pas de multiplicateur commun, certains pixels seront supprimés et ton image sera déformée.
La solution, pour moi, n'est donc pas là ! En fait, si j'ai besoin qu'une image remplisse une zone, je la place en BACKGROUND et je la positionne en fonction de la direction de l'étirement de cette zone...

C'est compliqué à expliquer, et je n'ai pas le temps de développer plus... tu peux faire des recherches concernant "l'alignement des backgrounds".

pour le texte :
J'utilise les EM en remplacement des PX.
Il faut juste bien donner une valeur à la hauteur des lignes de texte afin que certaines définitions d'écran ne chevauchent pas les textes (exemple : font-size: 1em; line-height: 1.2em;)
Tu peux donc (par exemple) donner une valeur à ton BODY en .em et des valeurs différentes en % pour certains textes :

body { font-size: 1em; line-height: 1.2em; }
.normaltext { font-size: 100%; }
.bigtext { font-size: 130%; }
.smalltext { font-size: 85%; }

Si tu insère un TABLE, prévois aussi de donner la valeur des TD :
td { font-size: 100%; }

Voila, pas de solution miracle, ce ne sont que des astuces. A toi de faire des essais ;-)

Jean_2 · Answer

merci, c'est très complet ce que tu me dis là, je vais faire quelques tests...

et vous-autres, vous procédez comme bzh56 ???

j'attends vos réactions? ça me sera utile à moi mais aussi à bcp d'autres novices...

Dalida · Answer

salut,

j'utilise un '<body>' de taille fixe (px).
et les polices en 'em'.

Jean_2 · Answer

up

Css et résolution d'écran : %, px, js...

4 réponses