Analyse des unités de longueur les plus couramment utilisées en HTML et CSS

Il existe 8 unités de longueur en Html et CSS, à savoir px, em, pt, ex, pc, in, mm, cm.

1.px

px : Pixel, par rapport à l'unité de longueur de l'appareil, les pixels sont relatifs à la résolution de l'écran du moniteur. Par exemple, la résolution utilisée par les utilisateurs de Windows est généralement de 96 pixels/pouce. La résolution utilisée par les utilisateurs MAC est généralement de 72 pixels/pouce.

2.em

em : unité de longueur relative. La taille de la police par rapport au texte dans l'objet actuel. Si la taille de police du texte en ligne actuel n'a pas été définie manuellement, elle est relative à la taille de police par défaut du navigateur.

3.ex

ex : unité de longueur relative. Hauteur par rapport au caractère "x". Cette hauteur correspond généralement à la moitié de la taille de la police. Si la taille de police actuelle du texte en ligne n'a pas été définie manuellement, elle sera relative à la taille de police par défaut du navigateur.

4.pt

pt : Point, unité absolue de longueur.

5.pc

pc : Pica, unité absolue de longueur. C'est l'équivalent de la taille du nouveau type n°4 de mon pays.

6.in

in : Pouce, unité absolue de longueur.

7.mm

mm : Millimètre, unité absolue de longueur.

8.cm

cm : Centimètre, unité absolue de longueur.

Parmi eux : 1in = 2,54 cm = 25,4 mm = 72pt = 6pc

Nous utilisons souvent px comme unité pour la taille du conteneur et la taille de la police (font-size) ; . De nombreux nationaux utilisent px. Unit, en fait, le seul inconvénient fatal de l'utilisation de px comme unité de police est que la fonction de mise à l'échelle des polices du navigateur ne peut pas être utilisée sous IE. Ou maintenez la touche Ctrl + faites défiler la molette centrale de la souris.

Beaucoup de gens suggèrent d'utiliser les unités html em. Ce n'est certainement pas très pratique pour les personnes habituées à utiliser px. Voici quelques formules de conversion et tableaux de comparaison pour votre référence :

px to em:Example: 12px / 16px = .75em
px to %:Example: 12px / 16px * 100 = 75%
px to pt:Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) = 12pt
em to px:Example: .75em * 16px = 12px
em to %:Example: .75em * 100 = 75%
% to px:Example: 75 * 16px / 100 = 12px
% to em:Example: 75 / 100 = .75em
pt to px:Example: 12pt * 96ppi / 72ppi = 16px

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!