Comparez les différences et les connexions entre px, em, rem et pt en CSS

Cet article présente principalement les caractéristiques, les différences et les conversions entre px, em, rem et pt en css. Il explique également en détail si chaque unité de taille hérite de la taille de l'élément parent et si le navigateur est compatible Amis dans le besoin. peut se référer à

Introduction au concept :

1 px (pixel, pixel) : est une longueur virtuelle. L'unité est l'unité de longueur de l'image numérique du système informatique. Si les px doivent être convertis en longueur physique, la précision DPI (Dots Per Inch, pixels par pouce) doit être spécifiée. Il existe généralement une option DPI lors de la numérisation et de l'impression. La valeur par défaut pour les systèmes Windows est de 96 dpi et celle par défaut pour les systèmes Apple est de 72 dpi.

2. em (unité de longueur relative, par rapport à la taille de la police du texte dans l'objet actuel) : Il s'agit d'une unité de longueur relative, faisant à l'origine référence à la largeur de la lettre M. , d'où le nom em. Désormais, il fait référence au multiple de la largeur du caractère et son utilisation est similaire à un pourcentage, tel que : 0,8em, 1,2em, 2em, etc. Habituellement 1em=16px.

3. pt (pointe, livre) : est une unité physique de longueur, faisant référence à 1/72 de pouce. pt=1/72(inch), px=1/dpi(inch)

4. rem (root em, root em) : est une nouvelle unité relative en CSS3, cette The l’unité a attiré une large attention. Quelle est la différence entre cette unité et em ? La différence est que lorsque vous utilisez rem pour définir la taille de la police d'un élément, il s'agit toujours d'une taille relative, mais elle est uniquement relative à l'élément racine HTML. On peut dire que cette unité combine les avantages de la taille relative et de la taille absolue. Grâce à elle, vous pouvez ajuster toutes les tailles de police proportionnellement en modifiant uniquement l'élément racine, et vous pouvez éviter la réaction en chaîne consistant à composer les tailles de police couche par couche. Actuellement, tous les navigateurs, à l'exception d'IE8 et des versions antérieures, prennent en charge rem. Pour les navigateurs qui ne le prennent pas en charge, la solution est très simple : écrire une instruction d'unité absolue supplémentaire. Ces navigateurs ignorent les tailles de police définies avec rem.

1. Questions sur em et px

Qu'est-ce que px ?

px pixels (Pixel). Unité de longueur relative. Les pixels px sont relatifs à la résolution de l'écran du moniteur. (Cité du manuel CSS2.0)

em est une unité de longueur relative. La taille de la police par rapport au texte dans l'objet actuel. 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. (Cité du manuel CSS2.0)

Fonctionnalités PX

1 IE ne peut pas ajuster la taille de la police qui utilise px comme unité

2 ; . La raison pour laquelle la plupart des sites Web étrangers peuvent être ajustés est qu'ils utilisent em ou rem comme unité de police

3. Firefox peut ajuster px et em, rem, mais plus de 96 % des internautes chinois utilisent le navigateur IE ; (ou noyau).

Qu'est-ce que c'est ?

em fait référence à la hauteur de la police. La hauteur de police par défaut de tout navigateur est de 16 pixels. Les navigateurs non modifiés suivent donc : 1em=16px. Puis 12px=0,75em, 10px=0,625em. Afin de simplifier la conversion de font -size, vous devez déclarer Font-size=62.5% dans le sélecteur de corps en CSS, ce qui fait que la valeur em devient 16px*62.5%=10px, donc 12px=1.2em, 10px=1em , c'est-à-dire également qu'il vous suffit de diviser votre valeur px d'origine par 10, puis de la remplacer par em comme unité.

caractéristiques em :

1em fait référence à la taille d'une police, qui héritera de la taille de la police de l'élément parent, ce n'est donc pas une valeur fixe. La taille de police par défaut pour tout navigateur est de 16 px. Par conséquent, 12px = 0,75em. Afin de faciliter la conversion dans les applications réelles, le style est généralement défini comme suit :

html { font-size: 62.5%; >

De cette façon, 1em = 10px. Le 1.2em couramment utilisé est théoriquement de 12px. Cependant, cette conversion ne tient pas dans le navigateur IE. 1.2em sera légèrement plus grand que 12px. La solution est de changer 62,5 % dans le style de la balise html en 63 %, soit :

html { font-size. : 63%; }

Dans les articles chinois, il y a généralement deux espaces au début du paragraphe. Si px est utilisé comme unité, 24px doit être laissé de côté pour une police de 12px, et 28px doit être laissé de côté pour une police de 14px... Cette conversion est très inutilisable. Si vous utilisez l'unité em, ce problème peut être facilement résolu. La taille d'un mot est de 1em et la taille des deux mots est de 2em. Par conséquent, définissez-le simplement comme ceci :

p { text-indent: 2em }

La différence entre les unités de police em et px

Le l'unité de police doit être em au lieu de px. En termes simples, elle prend en charge la mise à l'échelle des polices sous IE6. Lorsque vous appuyez sur ctrl+molette de défilement sur la page, les sites Web avec des polices en px ne répondront pas. px est une unité absolue et ne prend pas en charge la mise à l'échelle d'IE, et em est une unité relative.
Lorsque j'ai ajusté ce blog, j'ai découvert que non seulement la police, mais aussi l'espacement des lignes (hauteur de ligne) et les unités de hauteur verticale étaient tous en em. Garantir l’intégrité lors de la mise à l’échelle.

em a les caractéristiques suivantes :
1. La valeur de em n'est pas fixe
2.

étapes de réécriture :

1. Déclarez Font-size=62,5% dans le sélecteur de corps ;
2. Divisez votre valeur px d'origine par 10, puis remplacez-la par em comme unité ;
Simple, si vous n'avez besoin que de la valeur px d'origine ; ci-dessus Si le problème pouvait être résolu en deux étapes, peut-être que personne n'utiliserait px. Après les deux étapes ci-dessus, vous constaterez que la taille de la police de votre site Web est étonnamment grande. Étant donné que la valeur de em n'est pas fixe et héritera de la taille de l'élément parent, vous pouvez définir la taille de la police dans le contenu p sur 1,2em, soit 12 px. Ensuite, vous définissez la taille de police du sélecteur p sur 1,2em, mais si p appartient à l'enfant du contenu, la taille de police de p n'est pas 12px, mais 1,2em= 1,2 * 12px=14,4px. En effet, la taille de la police du contenu est définie sur 1,2 em. Cette valeur em hérite de la taille du corps de son élément parent, qui est de 16 px * 62,5 % * 1,2 = 12 px, et p est son enfant, et em hérite de la hauteur de la police de. content , qui fait 12px. Donc 1,2em de p n'est plus 12px, mais 14,4px.
3. Recalculez les valeurs em de ces polices agrandies. Évitez les déclarations répétées de taille de police, c'est-à-dire évitez le phénomène 1,2 * 1,2 = 1,44 mentionné ci-dessus. Par exemple, si vous déclarez que la taille de la police est de 1,2 em dans #content, alors lorsque vous déclarez la taille de la police de p, elle ne peut être que de 1 em, et non de 1,2 em, car ce em n'est pas celui-là et il hérite de la police. hauteur de #content. Il est devenu 1em=12px.
Caractères chinois 12px dans IE :
Lors de la conversion em, j'ai également découvert un phénomène étrange, c'est-à-dire que les caractères chinois 12px (1,2em) obtenus par la méthode ci-dessus ne sont pas équivalents aux polices définies directement avec 12px en taille IE, mais légèrement plus grand. Il vous suffit de changer 62,5 % en 63 % dans le sélecteur de corps et il s'affichera normalement. La raison peut être que lorsque IE traite les caractères chinois, la précision des valeurs à virgule flottante est limitée. Ce phénomène ne se produit que pour les caractères chinois de 12 pixels et n'existe pas en anglais. La solution est de remplacer 62,5% dans style.css par 63%.

2. fonctionnalités de rem

rem est une nouvelle unité relative (root em, root em) en CSS3. se concentrer sur. Quelle est la différence entre cette unité et em ? La différence est que lorsque vous utilisez rem pour définir la taille de la police d'un élément, il s'agit toujours d'une taille relative, mais elle est uniquement relative à l'élément racine HTML. On peut dire que cette unité combine les avantages de la taille relative et de la taille absolue. Grâce à elle, vous pouvez ajuster toutes les tailles de police proportionnellement en modifiant uniquement l'élément racine, et vous pouvez éviter la réaction en chaîne consistant à composer les tailles de police couche par couche. Actuellement, tous les navigateurs, à l'exception d'IE8 et des versions antérieures, prennent en charge rem. Pour les navigateurs qui ne le prennent pas en charge, la solution est très simple : écrire une instruction d'unité absolue supplémentaire. Ces navigateurs ignorent les tailles de police définies avec rem.

Exemple :

p {font-size:14px; font-size:.875rem;}

Remarque :

Le choix de l'unité de police à utiliser est principalement déterminé par votre projet. Si votre base d'utilisateurs utilise la dernière version du navigateur, il est recommandé d'utiliser rem. Si vous souhaitez prendre en compte la compatibilité, utilisez px ou utilisez les deux en même temps. temps.

3. Tableau de conversion des polices

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!