Pixels vs points en HTML / CSS
Lors de la création d'une page HTML, dois-je spécifier des choses comme margins avec des pixels ou avec des points en CSS?
Est-ce que l'un d'eux est considéré comme une meilleure pratique que l'autre? Des avantages ou des inconvénients pour l'un ou l'autre?
Utilisez px ou em
Points (pt): Les points sont traditionnellement utilisés dans les médias imprimés (tout ce qui doit être imprimé sur du papier, etc.). Un point est égal à 1/72 de pouce. Les points ressemblent beaucoup à des pixels, en ce qu'ils sont des unités de taille fixe et ne peuvent pas être mis à l'échelle.
Généralement, 1em = 12pt = 16px = 100%.
[Conclusion]
Le gagnant: pour cent (%).
- Remarque JohnB: c'est pour TEXTE. Évidemment, vous avez posé des questions sur "des choses comme les marges". (Je suppose que vous voulez dire aussi
padding.) Pour cela, je recommanderaispxouem. Personnellement, je change, selon la situation particulière.
PLUS D'ARTICLES
Les valeurs en points sont uniquement pour l'impression CSS!
(Commentaire plus bas)
Les points sont à imprimer? Non.
Les points ne doivent pas être imprimés exclusivement. Théoriquement, les points servent à définir une mesure absolue. Les pixels ne sont pas absolus, car selon votre écran et la définition choisie (pas la résolution), la résolution (pixels par pouce) peut aller de beaucoup (150 dpi) ou très peu (75 dpi). Ce qui signifie que vos pixels peuvent avoir une taille, ou peut-être la moitié de cette taille. Ce qui signifie que le texte que vous concevez pour être parfaitement lisible sur votre écran peut sembler trop grand sur l'écran de votre client ("veuillez réduire le texte, d'accord?") Ou trop petit pour être lisible sur l'écran de votre voisin ("hé, le site Web que vous m'a parlé de l'autre jour - celui sur lequel vous avez dit que vous aviez travaillé… eh bien je ne lisais pas très bien le texte, il est si petit ").
Les points sont une solution à ce problème. Mais les navigateurs et les systèmes d'exploitation doivent les gérer. Fondamentalement, cela signifie:
les navigateurs doivent calculer la taille d'affichage en pixels en utilisant la valeur donnée (par exemple, 10 pt) et la résolution réelle de l'écran; les systèmes d'exploitation doivent communiquer la résolution réelle actuelle, et non une valeur par défaut.
Également:
Les règles de base sont les suivantes:
Pixels pour l'affichage à l'écran; points pour l'impression.
'em' ou '%' (et le rem moins connu) sont meilleurs pour une mise en page plus flexible.
em est une unité de mesure basée sur la taille de la lettre "m" dans la police courante. La spécification de tailles dans em vous permet d'avoir une taille basée sur la taille de la police, ce qui signifie que vous pouvez changer la police, et la mise en page changera en conséquence.
Mais il y a de nombreuses fois où vous devez utiliser une taille fixe. Dans ce cas, px sera généralement le meilleur, car la plupart des pages Web sont affichées sur un écran basé sur des pixels. Mais si vous prévoyez d'avoir une page qui est beaucoup imprimée, vous pouvez avoir une feuille de style spécifique à l'impression avec une mise en page basée sur des points.
En général, je recommanderais em plutôt que px ou pt. Si vous utilisez px, c'est parce que vous avez des éléments sur votre page qui sont dimensionnés en pixels tels que des images, auxquels vous devez vous conformer pour le reste de la mise en page. Dans ce cas, les images étant en pixels, les feuilles de style devraient l'être également. De plus, comme les points sont une unité de mesure d'impression, il n'y a aucune garantie de leur apparence à l'écran: px est basé sur l'écran, vous donnera donc un aspect beaucoup plus cohérent à l'écran, multi-navigateur et multi-plateforme.
Soit dit en passant, cette page pourrait vous donner d'autres informations: http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
Les points sont excellents car ils mesurent 1/72 de pouce . Vous savez quelle sera la hauteur de votre texte. Le problème avec les pixels est qu'ils deviennent plus petits à mesure que la résolution est élevée. Les pixels sont parfaits si vous souhaitez enrouler du texte autour d'une image d'arrière-plan . Prend un peu de travail mais cela peut faire une belle page. J'ai entendu dire que les pixels ne sont pas redimensionnables en IE - donc s'ils veulent augmenter la taille de la police, ils ne peuvent pas. N'utilisez pas IE, donc je ne peux pas le dire. Les EM vous laissent à la merci de la façon dont la personne a défini les tailles de police dans son navigateur. Les Ems et les pourcentages facilitent la tâche. J'utilise toujours des points.
[...]
Non, les points ne sont pas les meilleurs . À tous ceux qui trouvent ce fil, oubliez que vous l'avez jamais lu. Il s'agit d'un forum de conception Web. Pour afficher des pages sur un support d'écran. Les points sont inclus dans CSS uniquement à des fins de conception d'impression. Pour les feuilles de style des supports d'impression. Elles ne sont pas évolutives comme% et les ems . Si vous êtes une sorte de concepteur de sites Web, vous devriez travailler pour rendre vos pages accessibles et l'utilisation de points est une grève contre cela dès le départ.
http://www.v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html
C'est drôle, tout le monde répond "pixel ou%/em" et non "pixel ou points".
Je ne savais pas qu'il y avait une différence entre les deux.
Edit: encore plus d'informations ... officielles!
Ne spécifiez pas la taille de police en pt , ni aucune autre unité de longueur absolue pour les feuilles de style d'écran. Ils s'affichent de manière incohérente sur toutes les plateformes et ne peuvent pas être redimensionnés par l'agent utilisateur (par exemple, le navigateur). Conservez l'utilisation de ces unités pour le style sur des supports aux propriétés physiques fixes et connues (par exemple l'impression) .
La réponse de John B ci-dessus est la meilleure et la plus précise. Je voulais juste signaler une possible confusion créée par la réponse au-dessus de la sienne. Un "em" en typographie est la largeur de la lettre "m" dans la police que vous avez choisie. Pour spécifier la hauteur d'une police, les imprimantes/typographes ont utilisé la "hauteur x", qui est la hauteur du minuscule x pour une police.
Comme le souligne John, les pt sont une unité de mesure fixe égale à 1/72e de pouce. Étant donné que les moniteurs ont des densités de pixels variables (72/pouce, 96/pouce ...), ce n'est généralement pas un bon moyen de dimensionner les choses dans les documents HTML.
L'em se rapporte directement à l'ancienne unité de typographie et constitue une excellente mesure relative. Au fur et à mesure que la taille de votre écran est mise à l'échelle, les tailles de police évoluent avec elle. Si vous utilisez des em pour les marges, elles évoluent par rapport à la taille de votre police, ce qui est généralement une bonne chose.
Mais, pour les marges, le remplissage et tout ce qui n'est pas directement lié à la police, il est préférable d'utiliser les rem ou les "em relatifs". La meilleure façon de le faire est de déclarer une taille de police par défaut pour votre corps ou votre balise html au départ. Quelque chose comme body font-size = 16px est un bon point de départ. Ensuite, partout ailleurs dans le document, utilisez em pour le texte et rem pour tout le reste. Ou utilisez des pourcentages. Soit fonctionnera bien. Comme les em et les rem, votre% est relatif à la taille de police d'origine de 16px = 100%.
Tout dans le document sera mis à l'échelle par rapport à votre paramètre initial pour une taille de police de 100% à 16 pixels. De cette façon, vous n'utilisez une mesure de pixel qu'une seule fois dans le document. Cela est pratique si vous souhaitez définir ultérieurement des requêtes multimédias pour ajuster vos tailles et marges afin de s'adapter à différentes densités de pixels sur différents écrans de périphérique. Il vous suffit d'avoir des requêtes pour cette seule déclaration initiale dans la balise body. Tout le reste s'ajustera par rapport à cela et n'aura pas besoin d'être changé.
juste une pensée, maxw3st
Quiconque vous dit d'utiliser des pixels est faux. Les pixels fonctionnent bien, mais ils ne sont tout simplement pas nécessaires ... Jamais! Les points sont une manière parfaitement fine de spécifier une mesure absolue, et pour l'échelle sur laquelle nous travaillons couramment sur le Web, ils ne sont plus souvent la mesure préférée.
À côté des points, il y a aussi le pica, le pouce, le centimètre, etc. Choisir l'un de ces éléments par rapport à l'autre revient à dire: "devrais-je mesurer cette pièce en pieds ou en pouces?" Laissez le bon sens vous guider. Ils feront tous le travail.
Em, qui est apparu dans certaines des réponses, devrait être réservé lorsque cela est approprié. C'est-à-dire, "quand cette chose évolue, je veux que cette autre chose évolue". C'est à cela que servent les mesures relatives. Je sais que c'est au-delà de la portée de votre question initiale, mais j'ai dû répondre à certaines des absurdités de "toujours les utiliser".
BTW, les pixels ne sont pas égaux aux pixels physiques. Aujourd'hui, px dans une feuille de style signifie 1/96e de pouce. C'est pourquoi je dis de ne pas les utiliser. La plupart des gens ne le savent pas. Ils les utilisent en pensant qu'ils spécifient des pixels réels. Je ne peux pas prendre ces gens au sérieux avec cela étant évident (bien que je ne blâme pas les gens, je blâme la nature confuse de l'état des choses, c'est pourquoi je fais campagne pour que les pixels disparaissent.). De plus, si les pixels signifiaient vraiment des pixels, ce serait un moyen horrible de spécifier les dimensions. Parlez du fait que les choses rétréciraient et se développeraient au hasard en fonction de résolutions d'écran arbitraires incontrôlables. Oui! Éloignez-vous des pixels !!! Dans la pratique, ils fonctionnent, mais uniquement grâce à des efforts invisibles de la part des fabricants de navigateurs et des utilisateurs de systèmes d'exploitation, en théorie, ils sont une façon horriblement ambiguë de spécifier vos intentions.
Les pixels sont plus esthétiques pour moi, et je pense que c'est considéré comme une meilleure pratique ...
Je pense que cela dépend de ce que vous essayez de faire.
Je trouve que la question clé est la distance doit-elle être redimensionnée avec la fenêtre? Certaines unités sont relatives, d'autres (comme les pixels et les points) ne le sont pas - une brève description est ici .
Je n'ai pas vu beaucoup de points utilisés, px semble plus courant lorsqu'une mesure absolue est nécessaire.
La réponse est: cela dépend. Pour quoi utilisez-vous vos marges? Font-ils partie intégrante d'une disposition équilibrée et redimensionnable, ou fournissent-ils simplement une gouttière sur les bords? Les pourcentages fonctionnent mieux dans le premier cas et les pixels fonctionnent bien dans le second.
Vous devriez essayer les différentes possibilités et déterminer celle qui convient le mieux à votre document. Puisqu'il n'y a pas de "bien et de mal" dans ce cas, vous pouvez choisir la réponse qui vous convient le mieux.
J'utilise des pixels pour presque tout.
Pour moi, c'est "l'impression" d'avoir un contrôle plus précis.
Pour les quelques éléments dont j'ai besoin pour redimensionner dynamiquement avec la fenêtre, j'utilise pour cent.
MODIFIER: