TL;DR : utiliser px .
Les faits
-
Tout d'abord, il est extrêmement important de savoir que selon les spécifications le CSS px unité n'est pas correspondent à un pixel d'affichage physique. Cela a toujours a été vrai - même en 1996 Spécification CSS 1 .
CSS définit le pixel de référence qui mesure la taille d'un pixel sur un écran de 96 ppp. Sur un écran dont la résolution est sensiblement différente de 96 ppp (comme les écrans Retina), l'agent utilisateur redéfinit l'échelle de l'image. px afin que sa taille corresponde à celle d'un pixel de référence. En d'autres termes, cette remise à l'échelle explique exactement pourquoi 1 pixel CSS équivaut à 2 pixels physiques de l'écran Retina.
Cela dit, jusqu'en 2010 (et en dépit de la situation du zoom mobile), le px correspondait presque toujours à un pixel physique, car tous les écrans largement disponibles étaient aux alentours de 96dpi.
-
Tailles spécifiées dans em sont relatives à l'élément parent . Cela conduit à la em Il s'agit du "problème de composition", où les éléments imbriqués deviennent progressivement plus grands ou plus petits. Par exemple :
body { font-size:20px; }
div { font-size:0.5em; }
Nous donne :
<body> - 20px
<div> - 10px
<div> - 5px
<div> - 2.5px
<div> - 1.25px
-
Les CSS3 rem qui n'est toujours relatif qu'à la racine. html est trop récent pour qu'on puisse s'y fier. En juillet 2012, environ 75% de tous les navigateurs utilisés soutenir le rem .
L'opinion
Je pense que tout le monde est d'accord pour dire qu'il est bon de concevoir ses pages de manière à ce qu'elles soient adaptées à tout le monde, et de prendre en compte les malvoyants. L'une de ces considérations (mais pas la seule !) consiste à permettre aux utilisateurs d'agrandir le texte de votre site, afin qu'il soit plus facile à lire.
Au début, la seule façon de fournir aux utilisateurs un moyen de mettre à l'échelle la taille du texte était d'utiliser des unités de taille relative (telles que em s). Cela s'explique par le fait que le menu de taille de police du navigateur a simplement modifié la taille de la police Racine. Ainsi, si vous avez spécifié des tailles de police dans px ils ne sont pas mis à l'échelle lorsque l'option de taille de police du navigateur est modifiée.
Les navigateurs modernes (et même le pas si moderne IE7) ont tous changé la méthode de mise à l'échelle par défaut pour simplement zoomer sur tout, y compris les images et les tailles des boîtes. Essentiellement, ils agrandissent ou réduisent le pixel de référence.
Oui, quelqu'un peut toujours modifier la feuille de style par défaut de son navigateur pour modifier la taille de la police par défaut (l'équivalent de l'option de taille de la police à l'ancienne), mais c'est une façon très ésotérique de procéder et je parie que personne 1 le fait. (Dans Chrome, elle est cachée sous les paramètres avancés, Contenu Web, Tailles de police. Dans IE9, elle est encore plus cachée. Vous devez appuyer sur Alt, et aller dans Affichage, Taille du texte). Il est beaucoup plus simple de sélectionner l'option Zoom dans le menu principal du navigateur (ou d'utiliser la fonction Ctrl + + / - /roue de la souris).
1 - dans les limites de l'erreur statistique, naturellement
Si nous supposons que la plupart des utilisateurs mettent les pages à l'échelle en utilisant l'option de zoom, je trouve que les unités relatives ne sont pas pertinentes. Il est beaucoup plus facile de développer votre page lorsque tout est spécifié dans la même unité (les images sont toutes traitées en pixels), et vous n'avez pas à vous soucier de la composition. ( "On m'a dit qu'il n'y aurait pas de maths" - il y a le problème de devoir calculer ce que représente 1,5em).
Un autre problème potentiel lié à l'utilisation d'unités relatives pour les tailles de police est que les polices redimensionnées par l'utilisateur peuvent rompre les hypothèses de votre mise en page. Par exemple, le texte pourrait être coupé ou trop long. Si vous utilisez des unités absolues, vous n'avez pas à vous soucier des tailles de police inattendues qui peuvent casser votre mise en page.
Ma réponse est donc d'utiliser des unités de pixels. J'utilise px pour tout. Bien sûr, votre situation peut varier, et si vous devez supporter IE6 (que les dieux des RFC aient pitié de vous), vous devrez utiliser em de toute façon.
