Rechercher : dans
Par :

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

Dernière réponse le 12 nov 2007 à 11:04:41 Jean_2, le 11 nov 2007 à 09:45:46 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « css et résolution d'écran : %, px, js... » dans :
[Webmaster] Adapter un site à toutes les résolutions, le centrer VoirUne question récurrente sur ce forum est "Comment adapter mon site à la résolution du visiteur ? Quelle résolution choisir ?" Pas besoin de se compliquer la vie pour ça ! Comment faire Il suffit d'appliquer une largeur relative (=qui change selon...
[PHP] Détecter la résolution d'affichage VoirPHP ne fournit pas de fonction permettant la détection de la résolution d'affichage car l'information concernant l'affichage du visiteur n'est pas fournie nativement par le protocole HTTP. Javascript par contre permet de détecter la résolution...
Le moniteur ou écran d'ordinateur VoirIntroduction aux écrans d'ordinateur On appelle écran (ou moniteur) le périphérique d'affichage de l'ordinateur. On distingue habituellement deux familles d'écrans : Les écrans à tube cathodique (notés CRT pour Cathod Ray Tube), équipant la...
Écran plat VoirLes moniteurs à écran plat Les moniteurs à écran plat (notés parfois FPD pour Flat panel display) se généralisent de plus en plus dans la mesure où leur facteur d'encombrement et leur poids sont très inférieurs à ceux des écrans CRT...

1

bzh56, le 11 nov 2007 à 10:44:19
  • +1

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 ;-)

Répondre à bzh56

2

Jean_2, le 11 nov 2007 à 10:57:21

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...

Répondre à Jean_2

3

Dalida, le 11 nov 2007 à 12:17:46

Salut,

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

[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

4

 Jean_2, le 12 nov 2007 à 11:04:41

Up

Répondre à Jean_2