Analyse de la conversion entre unités de longueur en CSS

L'unité de longueur la plus couramment utilisée lors de l'écriture de CSS est px (pixel), et em, pt, etc. sont souvent vus. En fait, il existe 8 unités de longueur en CSS, à savoir px, em, pt, ex, pc. , po, mm, cm.
1. 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 WONDOWS 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 : 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 sera relative à la taille de police par défaut du navigateur.
3.pt : Point, unité absolue de longueur.
4. 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.
5. pc : Pica, unité absolue de longueur. C'est l'équivalent de la taille du nouveau type n°4 de mon pays.
6. in : pouce, unité absolue de longueur.
7. mm : Millimètre, unité absolue de longueur.
8. 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 ; , mais utilisez en fait px comme unité de police. Le seul inconvénient fatal est que la fonction de mise à l'échelle des polices du navigateur ne peut pas être utilisée sous IE.
Cependant, je pense personnellement que l'inconvénient d'utiliser px comme unité de police et de ne pas pouvoir utiliser la fonction de mise à l'échelle des polices du navigateur sous IE n'est plus si important. Parce que les nouvelles versions d'IE7 et IE8 prennent déjà en charge la fonction de zoom de la page Web entière, y compris Firefox, qui zoome par défaut sur la page Web entière au lieu de redimensionner la police. Est-il important de ne pas simplement redimensionner la taille de la police ? Ctrl + faites défiler le milieu de la souris Essayez la molette de défilement ! IE s'est amélioré

En fait, il y a 8 unités de longueur en CSS, à savoir px, em, pt, ex, pc, in, mm, cm ! ;
px : pixel (Pixel), par rapport à l'unité de longueur de l'appareil, les pixels sont relatifs à la résolution de l'écran d'affichage. Par exemple, la résolution utilisée par les utilisateurs de WONDOWS 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.
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.
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.
pt : Point, unité absolue de longueur.
pc : Pica, unité absolue de longueur. C'est l'équivalent de la taille du nouveau type n°4 de mon pays.
in : Pouce, unité absolue de longueur.
mm : Millimètre, unité absolue de longueur.
cm : Centimètre, unité absolue de longueur.
Parmi eux : 1in = 2,54 cm = 25,4 mm = 72pt = 6pc
Nous utilisons souvent le px comme unité pour la taille du conteneur, et tout le monde n'a aucune objection à utiliser le px comme unité. taille de la police (font-size). 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.
Tant 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 www.hnnedu.com 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
PixelsEMsPercentPoints
6px0.375em37.5%5pt
7px0.438em43.8%5pt
8px0.5em50%6pt
9px0.563em56.3%7pt
10px0.625em62.5%8pt
11px0.688em68.8%8pt
12px0.75em75%9pt
13px0.813em81.3%10pt
14px0.875em87.5%11pt
15px0.938em93.8%11pt
16px1em100%12pt
17px1.063em106.3%13pt
18px1.125em112.5%14pt
19px1.188em118.8%14pt
20px1.25em125%15pt
21px1.313em131.3%16pt
22px1.375em137.5%17pt
23px1.438em143.8%17pt
24px1.5em150%18pt

.

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!