Lorsque je crée une page HTML, dois-je spécifier des choses comme margin avec des pixels ou des points en CSS ?
L'une d'entre elles est-elle considérée comme une meilleure pratique que l'autre ? Y a-t-il des avantages ou des inconvénients à l'une ou l'autre ?
Utilisez px o 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 aux pixels, en ce sens qu'il s'agit d'unités de taille fixe qui ne peuvent pas changer de taille.
En général, 1em = 12pt = 16px = 100%.
[Conclusion]
Le gagnant : pour cent (%).
padding également.) Pour cela, je recommande px o em . Personnellement, je change, en fonction de la situation particulière.PLUS D'ARTICLES
Les valeurs des points sont uniquement pour l'impression CSS !
(Commentaire plus bas)
Les points sont pour l'impression ? Non.
Les points ne sont pas destinés exclusivement à l'impression. 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 (et non la résolution), la résolution (pixels par pouce) peut aller de beaucoup (150 dpi) à très peu (75 dpi). Cela signifie que vos pixels peuvent être d'une taille, ou peut-être de la moitié de cette taille. Cela signifie que le texte que vous concevez pour qu'il soit parfaitement lisible sur votre écran peut sembler trop grand sur l'écran de votre client ("s'il vous plaît, réduisez le texte, ok ?") ou trop petit pour être lisible sur l'écran de votre voisin ("hé, le site web dont vous m'avez parlé l'autre jour ? celui sur lequel vous avez dit avoir travaillé eh bien je n'ai pas pu lire le texte très bien, 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. En gros, cela signifie que :
Les navigateurs doivent calculer la taille d'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 réelle actuelle, et non une valeur par défaut.
Aussi :
La règle d'or est la suivante :
Pixels pour l'affichage à l'écran ; points pour l'impression.
em" ou "%" (et la moins connue rem ) sont préférables 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 actuelle. La spécification des tailles en em permet d'avoir une taille basée sur la taille de la police, ce qui signifie que vous pouvez changer la police et que la mise en page sera modifiée en conséquence.
Mais il y a de nombreuses fois où vous devez utiliser une taille fixe. Dans ce cas, px est généralement la meilleure solution, car la plupart des pages web sont affichées sur un écran basé sur des pixels. Mais si vous prévoyez d'imprimer une page en grande quantité, vous pouvez utiliser une feuille de style spécifique à l'impression avec une mise en page basée sur des points.
En général, je recommande em sur px o pt . Si vous utilisez px La raison en est que votre page contient des éléments dont la taille est exprimée en pixels, comme des images, et que le reste de la mise en page doit s'y conformer. Dans ce cas, comme les images sont en pixels, les feuilles de style doivent aussi s'y conformer. En outre, comme les points sont une unité de mesure d'impression, il n'y a aucune garantie quant à leur apparence à l'écran : les px sont basés sur l'écran et vous donneront un aspect beaucoup plus cohérent à l'écran, quel que soit le navigateur ou la plate-forme.
Au fait, cette page pourrait vous donner des informations supplémentaires : http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
Les points sont excellents puisqu'ils mesurent 1/72 pouces. . Vous savez quelle sera la hauteur de votre texte. Le problème avec les pixels, c'est qu'ils deviennent plus petits au fur et à mesure que la résolution augmente. Les pixels sont parfaits si vous voulez enrouler du texte autour d'une image de fond. . Cela demande un peu de travail, mais cela peut donner une belle page. J'ai entendu dire que les pixels ne sont pas redimensionnables dans IE - donc s'ils veulent augmenter la taille de la police, ils ne peuvent pas. Je n'utilise pas IE, donc je ne peux pas me prononcer. Je me souviens avoir entendu cela. 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 rendent les choses plus faciles. J'utilise toujours des points.
[...]
Non, les points ne sont pas les meilleurs . À tous ceux qui trouvent ce fil, oubliez que vous avez lu ça. Il s'agit d'un forum sur la conception de sites Web. Pour afficher des pages sur des supports d'écran. Les points sont inclus dans les CSS uniquement à des fins de conception de l'impression. Pour les feuilles de style des médias imprimés. Ils ne sont pas extensibles comme le sont les % et les ems. . Si vous êtes un quelconque concepteur de sites web, vous devriez vous efforcer de rendre vos pages accessibles et l'utilisation de points est une atteinte à cet objectif 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 pas "pixel ou points".
Je ne savais pas qu'il y avait une différence entre les deux.
Edit : encore plus d'infos... officielles !
Ne pas spécifier la taille de la police en pt ou d'autres unités de longueur absolue pour les feuilles de style d'écran. Leur rendu n'est pas uniforme sur toutes les plates-formes et l'agent utilisateur (le navigateur, par exemple) ne peut pas les redimensionner. Conserver l'utilisation de ces unités pour le stylisme sur des supports dont les propriétés physiques sont fixes et connues (par exemple, l'impression). .
Quelqu'un qui vous dit d'utiliser des pixels est mauvais . Les pixels fonctionnent bien, mais ils ne sont tout simplement pas nécessaires... Jamais ! Les points sont un moyen parfaitement adapté pour spécifier une mesure absolue, et pour l'échelle à laquelle nous travaillons généralement sur le Web, ils sont le plus souvent la mesure préférée.
Outre les points, il existe aussi le pica, le pouce, le centimètre, etc. Choisir l'un d'entre eux plutôt que l'autre revient à dire "dois-je mesurer cette pièce en pieds ou en pouces ?". Laissez-vous guider par votre bon sens. Ils feront tous l'affaire.
Em, qui est apparu dans certaines réponses, devrait être réservé aux cas où il est approprié. C'est-à-dire, "quand cette chose se met à l'échelle, je veux que cette autre chose se mette à l'échelle". C'est à cela que servent les mesures relatives. Je sais que cela dépasse le cadre de votre question initiale, mais je devais répondre à certaines des absurdités concernant le fait de "toujours utiliser l'em".
D'ailleurs, les pixels ne sont pas des 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 si 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 la disparition des pixels). De plus, si les pixels signifiaient vraiment des pixels, ils seraient un moyen horrible de spécifier les dimensions. Parlez du fait que les choses rétréciraient et grandiraient aléatoirement en fonction des résolutions d'écran arbitraires et incontrôlables. Oups ! Restez loin des pixels ! !! En pratique, ils fonctionnent, mais seulement grâce à des efforts cachés de la part des fabricants de navigateurs et de systèmes d'exploitation. En théorie, ils constituent un moyen horriblement ambigu de spécifier 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 imprimeurs/typographes utilisaient la "hauteur x", qui correspond à la hauteur du x minuscule d'une police.
Comme le souligne John, les pt sont une unité de mesure fixe égale à 1/72e de pouce. Comme les moniteurs ont des densités de pixels variables (72/pouce, 96/pouce...), ce n'est généralement pas une bonne façon de dimensionner les choses dans les documents HTML.
Le em est directement lié à l'ancienne unité de typographie et constitue une excellente mesure relative. Lorsque la taille de votre écran est modifiée, la taille des polices l'est également. Si vous utilisez des em pour les marges, ils sont mis à l'échelle par rapport à la taille de vos polices, 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 "ems relatifs". La meilleure façon de procéder est de déclarer une taille de police par défaut pour votre corps ou votre balise html initiale. Quelque chose comme body font-size = 16px est un bon point de départ. Ensuite, partout ailleurs dans le document, utilisez des em pour le texte et des rem pour tout le reste. Ou bien, utilisez des pourcentages. L'un ou l'autre fonctionnera très bien. Comme les em et les rem, le pourcentage est relatif à la taille de police initiale de 16px = 100 %.
Tout ce qui se trouve dans le document sera mis à l'échelle par rapport au réglage initial de votre taille de police de 100 %, à savoir 16px. Ainsi, vous n'utilisez la mesure en pixels qu'une seule 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 tenir compte des différentes densités de pixels sur différents écrans. Il suffit d'avoir des requêtes pour cette déclaration initiale dans la balise body. Tout le reste s'ajustera en fonction de cette déclaration et n'aura pas besoin d'être modifié.
juste une idée, maxw3st
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
