Différences entre : px, %, em Résolu/Fermé

Question

Bonsoir,

je voudrais connaître les réelles différences qu'il peut exister en CSS lorsque l'on définit la taille d'un élément (width ou même un padding). Je parle ici de définir la taille soit en pixels, soit en % ou soit en em.

Quelles sont les avantages et inconvénients de chacun de ces types?
Lesquels sont-ils plus judicieux d'utiliser au jour d'aujourd'hui et pourquoi?

Merci

animostab · Answer

Salut 

Pixel = taille fixe , 1 pixel est la plus petite unité d'affichage d'un écran, permet le design précis au pixel près

% = pourcentage de la taille de la fenêtre du navigateur affichée sur un écran permet notamment le design fluide ou le responsive design

em = taille proportionelle à l'élément parent et est plutot utilisé pour les tailles de polices https://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html

Toutes ces normes de valeur ne sont pas, ni mieux, ni moins bien. cela dépend de l'usage auquel elles sont destinés par le webmaster.
 
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

mohamedlevy · Answer

Salut,

la différence entre px, em et %... vraiment?

Ce sont des unités différentes.. non plus précisément le px(pixel) est une valeur numérique.
Les autres valeurs sont dites relatives:
L'em(quadratin typographique) indique la hauteur d'une ligne courante de texte pour les rapports suivants:
1em = hauteur d'une ligne
0.5em = moitié d'une ligne
0.12 em = un douzième de la hauteur de la ligne

Quand à un %(pourcentage) est il nécessaire d'expliquer...bon quand même:
100% = toute la place disponible
50% = la moitié de l'espace disponible
120% = 20% de plus que la place disponible(on force une dimension à être plus grande que sa dimension entière).

Concrètement pourquoi s'embêter et ne pas utiliser tout le temps une taille en pixels?
Sur une page A4(21cmX29.7cm) vous pouvez donner des dimensions dans une unité numéraire facilement puisque votre page à des dimensions fixes.
Si vous voulez faire quelque chose sur une taille plus grande comme du A3 ou une taille plus petite comme du B5 vous devez 'calculer' les dimensions en conséquences.

En informatique on ne connaît pas la taille de l'écran de chaque utilisateur sur Internet.
Si vous faites un site 'limité' à 1024 pixels de largeurs les personnes utilisant une taille supérieure à 1024 auront des marges correspondant à l'espace manquant.

 (pour)Quelqu'un ayant 1600 voire 1800pixels de largeur en résolution d'écran le site apparaitra comme s'il était dans le vide puisque les marges seront importantes(ou la marge si vous positionnez le site sur un côté de l'écran et non au milieu).
A contrario quelqu'un qui a un écran de 800 pixels de larges affichés ne verra qu'une partie de votre site.

Voici des statistiques sur les résolutions des utilisateurs:
http://www.actualitix.com/statistiques-resolutions-des-ecrans-dordinateurs.html

Pour éviter cela il faut indiquer le plus de tailles de façons relatives.
100% de largeur sera toujours 100% sur toutes les résolutions d'écran.
J'ai pris l'exemple de la largeur de tout le site mais les dimensions s'appliquent à toute la mise en page.
Que se passe il si l'utilisateur redimensionne sa fenêtre? Pour les différentes résolutions de chaque internaute?
En CSS Les dimensions servent à positionner les éléments les uns par rapport aux autres(dans l'ordre structurel de chaque balise HTML) et donc de faire une mise en page.
Si vous voulez faire 2 ou 3 colonnes vous devez donc indiquer des valeurs en %. Toute valeur décrite en pixel donnera forcément une erreur d'affichage et provoqueras des décalages plus ou moins important et qui se nomment: bugs d'affichage.
Le quadratin(em) peut être utilisé aussi avec un peu d'habitude pour le positionnement des éléments containers(balise HTML). Il est bien sûr plus adapté et utilisé pour la mise en pages d'éléments de textes puisque cette unité est basée sur la hauteur d'une ligne de texte standard(qui correspond à la valeur standard du texte de la balise ou la valeur modifié de la balise).
Par exemple si vous voulez un texte écrit dans une taille plus grande que le texte courant vous pouvez simplement indiquer font-size:1.25em;
Une marge supérieure de 2em évite de faire 2 saut de lignes tout en ayant un écart de la hauteur de 2 lignes de textes...
etc

Différences entre : px, %, em

2 réponses

Discussions similaires