Css et résolution d'écran : %, px, js...
Résolu/Fermé
Jean_2
Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
-
11 nov. 2007 à 09:45
Jean_2 Messages postés 245 Date d'inscription lundi 24 septembre 2007 Statut Membre Dernière intervention 13 septembre 2013 - 12 nov. 2007 à 11:04
Jean_2 Messages postés 245 Date d'inscription lundi 24 septembre 2007 Statut Membre Dernière intervention 13 septembre 2013 - 12 nov. 2007 à 11:04
A voir également:
- Css et résolution d'écran : %, px, js...
- Double ecran - Guide
- Capture d'écran samsung - Guide
- Ecran noir pc - Guide
- Ecran d'accueil iphone - Guide
- Retourner ecran windows - Guide
4 réponses
bzh56
Messages postés
26
Date d'inscription
vendredi 19 mai 2006
Statut
Membre
Dernière intervention
11 novembre 2007
7
11 nov. 2007 à 10:44
11 nov. 2007 à 10:44
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 ;-)
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
Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
12
11 nov. 2007 à 10:57
11 nov. 2007 à 10:57
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...
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
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
11 nov. 2007 à 12:17
11 nov. 2007 à 12:17
salut,
j'utilise un '<body>' de taille fixe (px).
et les polices en 'em'.
j'utilise un '<body>' de taille fixe (px).
et les polices en 'em'.
Jean_2
Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
12
12 nov. 2007 à 11:04
12 nov. 2007 à 11:04
up
