em ou px, selon vous ? [Débat]

**Muchos** · 26/01/2014, 07h28

Envoyé par JefReb

alors dans ce cas font-size:1em; est égal à font-size:100%; qui est égal à 25px;

S'il n'y a pas de modification de la taille en cours de route

En effet, la font-size EM ou % d'un élément se base sur celle de son parent. Pour se baser sur la même partout, on peut aujourd'hui utiliser REM.

Ex:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>em/rem</title>
  <style type="text/css">
body {font-size: 2em;}
.foo {font-size: 1em;}
.bar {font-size: 1rem;}
</style>
</head>
<body>
  base
  <p class="foo">foo</p>
  <p class="bar">bar</p>
</body>
</html>

**JefReb** · 26/01/2014, 10h05

Ok Muchos, j'ai tout faux et je me suis mal exprimé. Je vais revoir ma copie et mes connaissances

**Sergejack** · 14/03/2014, 15h35

J'utilise l'unité REM plutôt que EM maintenant.

Cette unité, si vous l'ignorez est comme EM mais sans cumule.

ex:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
HTML { font-size: 10px }
DIV.em { font-size: 1.5em }
DIV.rem { font-size: 1.5rem }
 
<div class="em">
	Police à 15 pixels (10 pixel * 1.5)
	<div class="em">
		Police à 22.5 pixels (10 pixel * 1.5 * 1.5)
	</div>
<div>
 
<div class="rem">
	Police à 15 pixels (10 pixel * 1.5)
	<div class="rem">
		Police à 15 pixels (10 pixel * 1.5)
	</div>
<div>

Invité · 16/03/2014, 21h34

Yop.

Perso, j'utilise actuellement font-size en %.
Mais ça me pose parfois des soucis de re-calcul manuel (si dans un "parent" en font-size pas à 100%)...

remest-il "fully cross-browsers" (et surtout "full version" ?) ?

Et je ne parle même pas de text-size-adjust.... qui me soucie aussi....

N.B. J'ai une copine Japonaise qui a encore un MAC en I.E. version...... 5 !
J'ai beaucoup de la peine pour elle...

**Sergejack** · 17/03/2014, 08h55

REM n'est pas compatible IE8- mais est très bien supporté par les navigateurs plus sérieux.

http://caniuse.com/#search=rem

**integrateur** · 15/10/2014, 09h31

bonjour,
A mon avis, vaut mieux utiliser EM si on compte faire du responsive, mais si c'est pas le cas vaut mieux rester sur le PX.
L’intérêt réside sur l’adaptabilité du site si on veut réduire la taille de l'ensemble des tailles de font size par exemple, au lieu de changer un à un le font-size sur chaque balise, il suffit de changer la taille sur l’élément body et proportionnellement les autres suivront le rythme.
Un gain significative en terme de productivité.

**thelvin** · 15/10/2014, 10h27

Envoyé par integrateur

A mon avis, vaut mieux utiliser EM si on compte faire du responsive,

il y a une palanquée d'avantages, sans aucun doute. De loin mon choix préféré (enfin, il y a REM aussi, maintenant.)

Envoyé par integrateur

mais si c'est pas le cas vaut mieux rester sur le PX.

Euh. Pourquoi ?
Un pixel n'est jamais le même d'un écran à l'autre, c'est un peu le problème. Et donc le résultat, s'il est satisfaisant quelque part, ne le sera pas forcément ailleurs. Ce qui est le cas pour toutes les mesures bien sûr, mais avec les pixels, pas moyen de deviner qu'est-ce qui peut se passer quand quoi. Alors que les mesures relatives, on sait au moins qu'elles s'adaptent aux échelles du navigateur.

**stephweb** · 28/11/2014, 09h22

Bonjour,

Personnellement je fait toute en px, mais à plusieurs endroits j'ai lu que c'est mieux en em pour tout ce qui est text, font-size, ligne-height....

Mais parfois, je trouve que 1em c'est trop grand, alors que 0.9em c'est trop petit. Peu on mettre 0.95 par exemple? si oui, combien de chiffres après la virgule (le point) peut on aller?

Merci

**Sergejack** · 28/11/2014, 09h41

Vous pouvez mettre plusieurs nombres après la virgule.

Si ce nombre a une limite, je ne la connais pas mais je la suppose trivialement suffisante.

**thelvin** · 28/11/2014, 09h58

Disons qu'avant de pouvoir atteindre la précision maximale après la virgule, il va falloir que les pages couvrent des distances vraiment très grandes.

Par ailleurs, il n'y a pas officiellement de limite dans les chiffres avant ou après la virgule. On peut écrire ce qu'on veut, ça reste du CSS valide tant que c'est des chiffres. C'est juste qu'en principe, les moteurs de rendu CSS stockent ces nombres comme flottant IEEE 754, et donc si les chiffres continuent au bout d'un moment ils sont ignorés.

**stephweb** · 28/11/2014, 10h45

Ok merci.

Par contre je trouve que les em ça beug... je souhaite que tout mes paragraphe ainsi que tous mes liens soient à 14px (en px ça marche bien). Mais lorsque je les met en em (ça fait du 0.875em), mes liens deviennent plus petit que mes paragraphes...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
p { line-height:1.6em; font-size:0.875em; font-family:arial, helvetica, sans-serif; color:#000000; 8px;; }
a { text-decoration: none; font-size:0.875em; font-family:arial, helvetica, sans-serif; color:#4823E1; }

étrange ?

**thelvin** · 28/11/2014, 11h24

Pourquoi 14 pixels feraient-ils 0.875em ? 0.875em c'est 0.875 fois la hauteur d'une ligne telle que précédemment définie. Il n'y a aucune raison pour que la taille définie d'une ligne soit 16px. C'est un peu le principe -_-°...

En l'occurrence tu as justement redéfini la taille d'une ligne, donc forcément, 'faut adapter les mesures em en conséquence.

**Bovino** · 28/11/2014, 11h30

Sinon, ton histoire de liens plus petits, c'est normal et le comportement souhaité (et documenté dans toutes les docs). La notion d'em est héritée, donc dans ton lien, les 0.875em sont à calculer par rapport à la taille du conteneur, donc c'est 0.875em de 0.875em !
Au pire, utilises rem comme unité.

**stephweb** · 28/11/2014, 11h36

ok merci.

**doubleface2** · 11/06/2016, 19h42

bonsoir
les dimensions peuvent être en %, car cela pourra s'adapter sur les mobiles sans déstructurer la page

**domi65** · 11/06/2018, 12h15

En tant qu'internaute sénior, et ayant un écran de haute résolution (j'ai bien dit résolution, pas définition), j'ai demandé à mon Firefox chéri d'afficher les textes en utilisant une taille de police minimale de 14px.
Je me retrouve avec de nombreux sites dans lesquels le texte ne tient pas dans l'espace qui leur est dévolu, tout simplement parce que le développeur a programmé ces espaces en px. Il l'aurait fait en em. Logiquement, donc, pour ne pas em****** les autres, j'utilise em pour dimensionner tous les conteneurs. Quant aux images, à l'heure des smartphones et du « responsive », il faut évidemment utiliser les % (au moins pour les max-quelque-chose pour adapter les images à la page.

**domi65** · 11/06/2018, 12h23

Envoyé par integrateur

si c'est pas le cas vaut mieux rester sur le PX.
[...]
Un gain significative en terme de productivité.

Le gain de productivité vient du fait de tes habitudes. Presque tous mes conteneurs sont dimensionnées en em ou % et je gagne un temps fou par rapport au temps où je n'avais pas compris que le px doit être réservé à des éléments rares, comme la largeur des bordures.

**alama32** · 14/03/2021, 15h28

Mes images sont en px, mes écran aussi, alors, Je fais tout en PX, sauf parfois en % pour le responsive..
PS: vous avez oublié le VW -- lol

Affichage des résultats du sondage: En considérant le CSS2, vous recommander quoi ?

em ou px, selon vous ? [Débat]

CSS

Discussions similaires

Partager

Partager