Pixels vs. Points en HTML / CSS

Lors de la création d’une page HTML, devrais-je spécifier des éléments tels que des margin avec des pixels ou des points dans CSS?

L’un d’entre eux est-il 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

    • CSS FONT-SIZE: EM VS. PX VS. PT VS. POUR CENT

    Points (pt): Les points sont traditionnellement utilisés dans les médias imprimés (tout ce qui doit être imprimé sur papier, etc.). Un point est égal à 1/72 de pouce. Les points ressemblent beaucoup à des pixels, en ce sens qu’ils sont de taille fixe et ne peuvent pas évoluer en taille.

    Généralement, 1em = 12pt = 16px = 100%.

    [Conclusion]

    Le gagnant: pourcentage (%).

    • JohnB note: c’est pour TEXT. De toute évidence, vous avez posé des questions sur “des choses comme les marges”. (Je suppose que vous voulez dire aussi padding .) Pour cela, je recommanderais px ou em . Personnellement, je change selon la situation particulière.

    PLUS D’ARTICLES

    • px – em -% – pt – mot-clé

    Les valeurs de points sont uniquement pour l’impression CSS!

    (Commentaire plus bas)

    Les points sont à imprimer? Nan.

    Les points ne sont pas à imprimer 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 être 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 paraître trop grand sur l’écran de votre client («réduisez le texte s’il vous plaît, d’accord?») Ou trop petit pour être lisible sur l’écran de votre voisin m’a parlé de l’autre jour, celui sur lequel vous avez dit avoir travaillé… eh bien, je ne pouvais pas très bien lire le texte, c’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 de l’affichage en pixels en utilisant la valeur donnée (disons 10pt) et la résolution réelle de l’écran; les systèmes d’exploitation doivent communiquer la résolution en temps réel et non une valeur par défaut.

    Aussi:

    • CSS: Comparaison de la taille de la police, du pourcentage, du nombre d’Em, du point et du pixel

    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 présentation plus flexible.

    em est une unité de mesure basée sur la taille de la lettre ‘m’ dans la police actuelle. La spécification des tailles dans em vous permet d’avoir une taille basée sur la taille de la police, ce qui signifie que vous pouvez modifier la police et que la mise en page changera pour suivre.

    Mais il y a beaucoup de fois où vous devez utiliser une taille fixe. Dans ce cas, px va généralement être le meilleur, car la plupart des pages Web sont affichées sur un écran à base de 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 disposition basée sur les points.

    En règle générale, je recommanderais sur 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, et que le rest de la mise en page est nécessaire. Dans ce cas, comme les images sont en pixels, les feuilles de style devraient l’être également. De plus, les points étant une unité de mesure d’impression, rien ne garantit qu’ils apparaîtront à l’écran: px est basé sur un écran, ce qui vous donnera une apparence beaucoup plus cohérente à l’écran, sur plusieurs navigateurs et multiplates-formes.

    Au fait, cette page pourrait vous donner quelques informations supplémentaires: http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

    Les points sont excellents car ils mesurent 1/72 de pouce . Vous savez à quel point votre texte sera grand. Plus les pixels sont petits, plus la résolution est élevée. Les pixels sont parfaits si vous voulez envelopper le texte autour d’une image d’arrière-plan . Cela prend un peu de travail mais ça peut faire une belle page. J’ai entendu dire que les pixels ne pouvaient pas être redimensionnés dans IE, donc s’ils ne veulent pas augmenter la taille de la police. N’utilise pas IE, donc je ne peux pas dire. Rappelez-vous d’avoir entendu cela. Les EM vous laissent à la merci de la façon dont la personne a défini les tailles de police dans leur navigateur. 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 avez déjà lu cela. Ceci est un forum de design web. Pour afficher des pages sur un support d’écran. Les points sont inclus dans CSS uniquement à des fins d’impression. Pour les feuilles de style des supports d’impression. Ils ne sont pas évolutifs en% et ems sont . Si vous êtes un concepteur de sites Web, vous devriez travailler pour rendre vos pages accessibles et utiliser des points est un coup contre tout ça.

    http://www.v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html

    C’est amusant, 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.

    Plus d’informations

    Edit: encore plus d’infos … officielles!

    Ne spécifiez pas la taille de police en pt , ni les autres unités de longueur absolue pour les feuilles de style. Ils s’affichent de manière incohérente sur les plates-formes et ne peuvent pas être redimensionnés par l’agent utilisateur (par exemple, un navigateur). Conservez l’utilisation de telles unités pour les styles sur des supports avec des propriétés physiques fixes et connues (par exemple, impression) .

    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 parfaite de spécifier une mesure absolue et, pour l’échelle à laquelle nous travaillons généralement sur le Web, ils ne sont pas 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 d’eux sur l’autre, c’est un peu comme dire: “devrais-je mesurer cette pièce en pieds ou en pouces?” Laissez le bon sens être votre guide. Ils vont tous faire le travail.

    Em, qui est apparu dans certaines des réponses, devrait être réservé lorsque cela est approprié. C’est-à-dire que “lorsque cette chose évolue, je veux que cette autre chose évolue”. C’est à cela que servent les mesures relatives. Je sais que cela dépasse le cadre de votre question originale, mais je devais répondre à certaines des absurdités sur «toujours utiliser em».

    BTW, les pixels ne sont pas égaux aux pixels physiques. Aujourd’hui, px dans une feuille de style signifie 1/96 de pouce. C’est pourquoi je dis ne les utilise pas. 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 personnes au sérieux car cela est é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 réellement les pixels, ils seraient une façon horrible de spécifier les dimensions. Parlez du fait que les choses se réduiraient au hasard et augmenteraient en fonction de résolutions d’écran arbitraires incontrôlables. Yikes! Restez loin des pixels !!! En pratique, ils fonctionnent, mais ce n’est qu’en raison des efforts inattendus de la part des fabricants de navigateurs et des systèmes d’exploitation, qu’en théorie, ils constituent une façon horriblement ambiguë de définir vos intentions.

    La réponse de John B ci-dessus est la meilleure et la plus précise. Je voulais juste signaler une confusion possible 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 correspond à la hauteur de la minuscule x pour une police.

    Comme le souligne John, les points sont une unité de mesure fixe égale à 1 / 72e de pouce. Étant donné que les densités de pixels (72 / inch, 96 / inch …) des moniteurs varient, ce n’est généralement pas un bon moyen de dimensionner 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 redimensionnée, les tailles de police sont adaptées. Si vous utilisez em pour les marges, elles sont proportionnelles à la taille de votre police, ce qui est généralement une bonne chose.

    Mais, pour les marges, le remplissage et toutes les choses qui ne sont pas directement liées à la police, il est préférable d’utiliser des “rem”, ou “ems relatifs”. La meilleure façon de le faire est de déclarer initialement une taille de police par défaut pour votre corps ou votre balise HTML. Quelque chose comme body font-size = 16px est un bon sharepoint départ. Alors, partout ailleurs dans le document, utilisez em pour le texte et rem pour tout le rest. Ou, utilisez des pourcentages. L’un ou l’autre fonctionnera bien. Comme em et rem, votre% est relatif à la taille de police originale de 16px = 100%.

    Tout dans le document sera mis à l’échelle par rapport à votre paramètre initial pour votre taille de police de 100% à 16 pixels. De cette façon, vous utilisez uniquement une mesure de pixel une fois dans le document. Cela s’avère pratique si vous souhaitez par la suite définir des requêtes multimédias pour ajuster vos tailles et vos marges afin de prendre en charge différentes densités de pixels sur différents écrans. Vous devez uniquement avoir des requêtes pour cette déclaration initiale dans la balise body. Tout le rest s’ajustera par rapport à cela et n’aura pas besoin d’être changé.

    juste une pensée, maxw3st

    Je pense que cela dépend de ce que vous essayez de faire.

    Je trouve que la question clé est de savoir si la distance doit ê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 fréquent lorsqu’une mesure absolue est nécessaire.

    Les pixels sont plus esthétiques pour moi et je crois que cela est considéré comme une meilleure pratique …

    La réponse est: cela dépend. Comment utilisez-vous vos marges? Sont-elles une partie intégrante d’une mise en page équilibrée et redimensionnable, ou fournissent-elles simplement une gouttière autour des 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 laquelle fonctionne le mieux pour votre document. Comme 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, cela se sent comme si j’avais un contrôle plus précis.

    Pour les quelques choses que je dois redimensionner dynamicment avec la fenêtre, j’utilise le pourcentage.

    MODIFIER:

    Qu’est ce que “em”?