Quelle est la différence entre ptet pxen CSS? Lequel dois-je utiliser et pourquoi?

px ≠ Pixels

Toutes ces réponses semblent incorrectes. Contrairement à l'intuition, en CSS ce px n'est pas des pixels . Du moins, pas au sens physique simple.

Lisez cet article du W3C , EM, PX, PT, CM, IN… , sur la façon dont pxune unité «magique» est inventée pour CSS. La signification de pxvarie selon le matériel et la résolution. (Cet article est récent, dernière mise à jour 2014-10.)

Ma propre façon de penser: 1 px is the size of a thin line intended by a designer to be barely visible.

Pour citer cet article :

L'unité px est l'unité magique du CSS. Il n'est pas lié à la police actuelle ni aux unités absolues. L'unité px est définie comme étant petite mais visible, et telle qu'une ligne horizontale de 1px de large peut être affichée avec des bords nets (pas d'anti-crénelage). Ce qui est net, petit et visible dépend de l'appareil et de la façon dont il est utilisé: le tenez-vous près de vos yeux, comme un téléphone portable, à bout de bras, comme un écran d'ordinateur, ou quelque part entre les deux, comme un livre? Le px n'est donc pas défini comme une longueur constante, mais comme quelque chose qui dépend du type d'appareil et de son utilisation typique.

Pour avoir une idée de l'apparence d'un px, imaginez un écran d'ordinateur CRT des années 1990: le plus petit point qu'il peut afficher mesure environ 1 / 100e de pouce (0,25 mm) ou un peu plus. L'unité px tire son nom de ces pixels d'écran.

De nos jours, il existe des appareils qui pourraient en principe afficher des points plus petits et pointus (même si vous pourriez avoir besoin d'une loupe pour les voir). Mais les documents du siècle dernier qui utilisaient px dans CSS se ressemblent toujours, quel que soit l'appareil. Les imprimantes, en particulier, peuvent afficher des lignes nettes avec des détails beaucoup plus petits que 1px, mais même sur les imprimantes, une ligne 1px ressemble beaucoup à celle d'un écran d'ordinateur. Les appareils changent, mais le px a toujours la même apparence visuelle.

Cet article donne des conseils sur l'utilisation de ptvs pxvs em, pour répondre à cette question.

Ici, vous avez une explication très détaillée de leurs différences

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Le jist de celui-ci (de la source)

Les pixels sont des unités de taille fixe qui sont utilisées dans les supports d'écran (c'est-à-dire à lire sur l'écran de l'ordinateur). Pixel signifie "élément d'image" et comme vous le savez, un pixel est un petit "carré" sur votre écran. Les points sont traditionnellement utilisés dans les supports 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 des unités de taille fixe et ne peuvent pas être mis à l'échelle.

Jetez un œil à cet excellent article sur CSS-Tricks:

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

Tiré de l'article:

pt

La dernière unité de mesure dans laquelle il est possible de déclarer les tailles de police est la valeur en points (pt). Les valeurs de points sont uniquement pour l'impression CSS! Un point est une unité de mesure utilisée pour la typographie encre sur papier réelle. 72pts = un pouce. Un pouce = un pouce réel comme sur une règle. Pas un pouce sur un écran, ce qui est totalement arbitraire en fonction de la résolution.

Tout comme la précision des pixels sur les moniteurs pour le dimensionnement des polices, les tailles de points sont parfaitement précises sur le papier. Pour obtenir les meilleurs résultats multi-navigateurs et multi-plates-formes lors de l'impression des pages, configurez une feuille de style d'impression et dimensionnez toutes les polices avec des tailles en points.

Pour faire bonne mesure, la raison pour laquelle nous n'utilisons pas de tailles de points pour l'affichage à l'écran (à part que cela soit absurde), est que les résultats entre les navigateurs sont radicalement différents:

px

Si vous avez besoin d'un contrôle précis, dimensionner les polices en pixels (px) est un excellent choix (c'est mon préféré). Sur un écran d'ordinateur, il n'est pas plus précis qu'un seul pixel. Avec le dimensionnement des polices en pixels, vous dites littéralement aux navigateurs de rendre les lettres exactement ce nombre de pixels de hauteur:

Windows, Mac, aliasé, anti-aliasé, multi-navigateurs, n'a pas d'importance, une police définie à 14px aura une hauteur de 14px. Mais cela ne veut pas dire qu'il n'y aura pas encore de variation. Dans un test rapide ci-dessous, les résultats étaient légèrement plus cohérents qu'avec les mots clés mais pas identiques:

En raison de la nature des valeurs de pixel, elles ne se répercutent pas. Si un élément parent a une taille de pixel de 18px et que l'enfant est de 16px, l'enfant sera de 16px. Cependant, les paramètres de taille de police peuvent être utilisés en combinaison. Par exemple, si le parent était défini sur 16px et que l'enfant était défini sur plus grand, l'enfant serait en effet plus grand que le parent. Un test rapide m'a montré ceci:

"Plus grand" a fait passer le 16px du parent en 20px, soit une augmentation de 25%.

Les pixels ont été mal emballés par le passé pour des problèmes d'accessibilité et de convivialité. Dans IE 6 et les versions antérieures, les tailles de police définies en pixels ne peuvent pas être redimensionnées par l'utilisateur . Cela signifie que nous, les jeunes designers en bonne santé branchés, pouvons définir le type en 12px et le lire à l'écran très bien, mais lorsque les gens un peu plus longtemps dans la dent vont augmenter la taille pour pouvoir le lire, ils ne le peuvent pas. C'est vraiment la faute d'IE 6, pas la nôtre, mais nous avons ce que nous avons et nous devons y faire face.

Définir la taille de la police en pixels est la méthode la plus précise (et je trouve la plus satisfaisante), mais prenez en considération le nombre de visiteurs utilisant encore IE 6 sur votre site et leurs besoins en matière d'accessibilité. Nous sommes à la fine pointe de la technologie pour ne plus avoir à nous soucier de cela.

Un pt est 1 / 72ème de pouce et est une mesure inutile pour tout ce qui est rendu sur un appareil qui ne calcule pas correctement le DPI. Cela en fait un choix raisonnable pour l'impression et un choix terrible pour une utilisation à l'écran.

Un px est un pixel, qui correspondra à un pixel d'écran dans la plupart des cas.

CSS fournit un tas d'autres unités, et celle que vous devez choisir dépend de ce dont vous définissez la taille.

Un pixel est idéal si vous avez besoin de dimensionner quelque chose pour correspondre à une image, ou si vous voulez une bordure fine.

Les pourcentages sont parfaits pour les tailles de police car, si vous les utilisez de manière cohérente, vous obtenez des tailles de police proportionnelles aux préférences de l'utilisateur.

Les ems sont parfaits lorsque vous voulez qu'un élément se taille lui-même en fonction de la taille de la police (donc un paragraphe peut devenir plus large si la taille de la police est plus grande)

… etc.

pt est une dérivation (abréviation) de "point" qui était historiquement utilisée dans les faces imprimées où la taille était généralement "mesurée" en "points" où 1 point a une mesure approximative de 1/72 de pouce, et donc un 72 La police de points aurait une taille de 1 pouce.

px est une abréviation de "pixel" qui est un simple "point" sur un écran ou une imprimante matricielle ou une autre imprimante ou un appareil qui rend en mode point - par opposition aux vieilles machines à écrire qui avaient une taille fixe, un percuteur solide qui laissé une empreinte du personnage en appuyant sur un ruban, laissant ainsi une image de taille fixe.

Les termes «majuscules» et «minuscules» sont étroitement liés au point. dans une case ci-dessous, et donc la casse «minuscule».

Il y avait différentes cases (cas) pour différentes polices et tailles typographiques, mais toujours et des casse «supérieure» et «minuscule» pour chacune d'elles.

Un autre terme est le "pica" qui est une mesure d'un caractère dans la police, donc un pica est 1/6 de pouce ou 12 unités de mesure de point (12/72).

À proprement parler, la mesure se fait sur des ordinateurs de 4,233 mm ou 0,166 pouces alors que l'ancien point (américain) est de 1 / 72,27 de pouce et le français de 4,512 mm (0,177 pouces). Ainsi ma déclaration "approximative" concernant les mesures.

En outre, les machines à écrire utilisées dans les bureaux avaient soit une taille «Elite» soit une taille «Pica» où la taille était de 10 et 12 caractères par pouce respectivement.

De plus, le «point», avant la normalisation, était basé sur la taille du «pied» des typographes métalliques, la taille de l'empreinte de base d'un caractère et variait quelque peu en taille.

Notez qu'un «pied» typographique provenait à l'origine d'un pied réel d'imprimeurs décédé. Un pied typographique contient 72 picas ou 864 points.

En ce qui concerne l'utilisation de CSS, je préfère utiliser EM plutôt que px ou pt, gagnant ainsi l'avantage de la mise à l'échelle sans perte d'emplacement et de taille relatifs.

EDIT: Juste pour être complet, vous pouvez considérer EM (em) comme un élément de mesure d'une hauteur de police, donc 1em pour une police 12pt serait la hauteur de cette police et 2em serait le double de cette hauteur. Notez que pour une police 12px, 2em équivaut à 24 pixels. SO 10px correspond généralement à 0,63em d'une police standard car "la plupart" des navigateurs se basent sur 16px = 1em comme taille de police standard.