2010-03-05 3 views
32

Quelle est la différence entre px, em et ex? Et lorsque vous définissez la taille de police en CSS, utilisez-vous px, pt ou em?Quelle est la différence entre px, em et ex?

+3

Copies associées et possibles: http://stackoverflow.com/questions/1932773/should-i-use-em-or-px, http://stackoverflow.com/questions/348978/are-there-any- pratique-raisons-d'utiliser-em-au lieu-de-pt-font-taille-unités, http://stackoverflow.com/questions/132685/font-size-in-css-or-em, http: // stackoverflow.com/questions/609517/why-em-instead-of-px. –

+0

em, px, pt, pour cent. Quelle est la différence ? Quelques informations ici: http://markupjavascript.blogspot.in/2013/10/em-px-pt-percent-what-is-difference.html –

+0

Je pense que c'est une question dupliquée, vous pouvez trouver la même chose ici http://stackoverflow.com/questions/3333076/difference-between-px-and-em/25540376 – Phuc

Répondre

18
  1. Pixels (px) dépendent du navigateur. C'est la taille absolue que vous verriez sur votre écran.
  2. Em sont en quelque sorte comme des pourcentages. Em s fait référence à la taille du texte de base. La valeur 1 em signifie la même chose qu'une valeur de 100 percent. Mais vous pouvez également le dire dans le sens inverse: Un pourcentage est juste un em multiplié par 100.
  3. Points (pt) sont ce que vous souhaitez utiliser dans les médias imprimés.
+2

Vous ne voulez pas dire que les pixels sont * dépendant de l'écran? Ils se ressemblent sur n'importe quel navigateur que vous utilisez, mais changent en fonction * uniquement * des paramètres d'écran/d'affichage. –

+3

le parallèle aux pourcentages est très trompeur, parce que le pourcentage n'est pas lié par héritage à la taille de la police –

+0

@JanusTroelsen - Quand il s'agit de tailles de police, il est. – Quentin

11

quelle est la différence px, em et ex?

http://www.w3.org/TR/CSS21/syndata.html#length-units décrit ceux-ci et les autres unités de longueur disponible en CSS

Amd lorsque vous définissez la taille de la police dans css, dois-je utiliser px, pt ou em?

En règle générale, utilisez les pourcentages à l'écran et pt pour l'impression.

+1

Je dirais que l'utilisation de em ou ex est meilleure que les pourcentages d'alignement qui dépendent fortement du texte, puisque ces valeurs correspondent aux tailles de police. – dbmikus

+0

@dbmikus - 'ex' est un peu bizarre, la plupart des gens ne veulent pas exprimer les tailles de police dans ce terme. '1em' est exactement' 100% 'donc la corrélation est exactement la même. Certains navigateurs plus anciens (et notez quand la réponse a été écrite) étaient bogués quand il s'agissait de tailles de police dans les unités em, donc les pourcentages étaient nettement supérieurs. Ces jours-ci cela n'a pas d'importance. – Quentin

25

em: la font-size de la police concernée
ex: la x-height de la police concernée
px: pixels, par rapport au dispositif de visualisation

8

LNGUEUR CSS:

  • absolu: pouces (en), centimètre (cm), milimeter (mm), points (pt), pica (pc)

Les points sont des mesures typographiques standard utilisées par les imprimeurs et les typographes depuis des décennies et par des programmes de traitement de texte depuis de nombreuses années. Traditionnellement, il y a 72 points à un pouce (les points ont été définis avant l'utilisation généralisée du système métrique). Par conséquent, les lettres majuscules de texte définies à 12 points devraient être un sixième de pouce de haut. Par exemple, p {font-size: 18pt;} est équivalent à p {font-size: 0.25in;}.

Les picas sont un autre terme typographique. Un pica équivaut à 12 points, ce qui signifie qu'il y a 6 picas à un pouce. Comme nous venons de le voir, les lettres majuscules du texte à 1 pica devraient être d'un sixième de pouce. Par exemple, p {font-size: 1.5pc;} définirait le texte à la même taille que les exemples de déclarations trouvés dans la définition des points.

Ces unités ne sont vraiment utiles que si le navigateur connaît tous les détails du moniteur sur lequel votre page est affichée, l'imprimante que vous utilisez, ou tout autre agent utilisateur peut s'appliquer. Sur un navigateur Web, l'affichage est affecté par la taille du moniteur et la résolution à laquelle le moniteur est défini et il n'y a pas grand-chose que vous, en tant qu'auteur, pouvez faire à propos de ces facteurs. Les unités absolues sont beaucoup plus utiles pour définir des feuilles de style pour les documents imprimés, où la mesure des objets en termes de pouces, de points et de picas est courante. Comme vous l'avez vu, tenter d'utiliser des mesures absolues dans la conception Web est périlleux au mieux.

  • relative: em (em-hauteur), ex (e-hauteur), px. Les deux premiers représentent et "x-height", qui sont des mesures typographiques courantes; Cependant, en CSS, ils ont des significations que vous pourriez ne pas vous attendre si vous êtes familier avec la typographie.

em: un « em » est défini comme la valeur de taille de la police pour une police donnée. Si la taille de police d'un élément est de 14 pixels, alors pour cet élément, 1em est égal à 14 pixels.

ex: se réfère à la hauteur d'un minuscule x dans la police de caractères utilisée. Par conséquent, si vous avez deux paragraphes dans lesquels la taille du texte est de 24 points, mais que chaque paragraphe utilise une police différente, la valeur de ex peut être différente pour chaque paragraphe. C'est parce que les polices différentes ont des hauteurs différentes pour x

px: les petites boîtes de couleur dans un moniteur sont des pixels. En général, si vous déclarez quelque chose comme font-size: 18px, un navigateur Web utilisera presque certainement les pixels réels sur votre moniteur après tout, ils sont déjà là mais avec d'autres dispositifs d'affichage, comme les imprimantes, l'agent utilisateur aura à redimensionner les longueurs de pixels à quelque chose de plus sensible. En d'autres termes, le code d'impression doit comprendre combien de points il y a dans un pixel, et pour ce faire, il peut utiliser le pixel de référence de 96ppi.

Conclution

En raison de ce potentiel pour redimensionnant, les pixels sont définis comme une unité de mesure relative, même si, dans la conception web, ils se comportent un peu comme des unités absolues.

Rrefrence: css the definite guid by eric meyer

0

em: Le em est une unité évolutive qui est utilisée dans les médias de documents web. Un em est égal à la taille de police actuelle, par exemple, si la taille de la police du document est 12pt, 1em est égale à 12pt.

px Les pixels sont des unités de taille fixe utilisées dans les supports d'écran (c'est-à-dire qui doivent être lues sur l'écran de l'ordinateur). Un pixel est égal à un point sur l'écran de l'ordinateur (la plus petite division de la résolution de votre écran).

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 aux pixels, en ce sens qu'ils sont de taille fixe et ne peuvent pas être dimensionnés.

+0

S'il vous plaît citer vos sources. – BoltClock

Questions connexes