Différences entre : px, %, em
Résolu/Fermé
A voir également:
- Différences entre : px, %, em
- Différence entre tcp et udp - Guide
- Différence entre gb et go - Forum Mobile
- Différence entre 1 million et 1 milliard - Guide
- Difference entre mo et mb ✓ - Forum Matériel & Système
- Différence entre streaming et replay - Guide
2 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 28/02/2014 à 19:43
Modifié par animostab le 28/02/2014 à 19:43
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.
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.
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
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
Indépendamment de la qualité d'une image mettre celle ci dans une taille supérieur pour la redimensionner à par exemple 50% augmentera sa qualité d'affichage(la rangée de pixels affichée par rapport à celle existante est doublée). Bien sûr son poids et temps de chargement sera augmenté aussi en proportion.
Par contre afficher une image plus grande que sa taille réelle présente un aspect flouté ou pixelisé correspondant au doublement des pixels et est bien sûr à éviter.
Il y a d'autres utilisations des dimensions même si celles ci concernent surtout le positionnement des éléments de la page:
http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
Par contre afficher une image plus grande que sa taille réelle présente un aspect flouté ou pixelisé correspondant au doublement des pixels et est bien sûr à éviter.
Il y a d'autres utilisations des dimensions même si celles ci concernent surtout le positionnement des éléments de la page:
http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
28 févr. 2014 à 20:58