Comprendre l'utilisation des unités de longueur HTML px em pt

Zone de l'unité HTML px em pt

1. Introduction à l'unité PXEMPT - TOP

pxLe nom de l'unité. est Pixel, unité de longueur relative, le pixel (px) est la recommandation nationale relative à la résolution de l'écran du moniteur
emLe nom de l'unité est Unité de longueur relative. Par rapport à la taille de la police du texte dans l'objet actuel, elle est utilisée davantage à l'étranger Lecture étendue  : balise html em, balise html em accentuation
ptLe nom de l'unité est point ( Point), Unité de longueur absolue. Généralement, les anciennes versions des tableaux utilisent des unités de taille de longueur, mais elles ne sont pratiquement plus utilisées actuellement.

Une brève introduction aux unités HTML :

Px Pixel ; unité de longueur relative.

Pt Point ; unité de longueur absolue
Unité de longueur relative Em, où em est orthographié exactement de la même manière que le "EM" de la balise html 907fae80ddef53131f3292ee4f81644b, et ici em est utilisé comme unité de texte distincte.

1. Dans le passé, IE ne pouvait pas ajuster la taille de la police qui utilisait px comme unité, mais maintenant presque IE la prend en charge et il est recommandé d'utiliser px comme unité

2 ; . La plupart des sites Web étrangers peuvent La raison de l'ajustement est qu'il utilise em comme unité de police

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

px pixels (Pixel). Unité de longueur relative. Le pixel px est relatif à la résolution de l'écran du moniteur, et les captures d'écran QQ utilisent également PX comme unité de longueur et de largeur.

em est une unité relative de longueur. 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.

2. Cas de comparaison d'unités HTML -

TOP

1. Exemple simple : Largeur : 300 px de largeur est de 300 pixels Largeur:300pt La largeur est de 300 points
Largeur:300em La largeur est de 300 longueur relative
Ci-dessus, nous définissons différents exemples d'unités de la même valeur

2 Définissez différentes longueurs pour le texte em. px pt Unité pour voir l'effet :

Code CSS :

Code HTML :

.pcss5-px {
    font-size:12px
}
.pcss5-pt {
    font-size:12pt
}
.pcss5-em {
    font-size:2em
}

Conversion Em et px -

<p class="pcss5-px">
    我是pcss5
</p>
<p class="pcss5-pt">
    我是pcss5
</p>
<p class="pcss5-em">
    我是pcss5
</p>

TOP

La hauteur de police par défaut pour n'importe quel navigateur est de 16px (16 pixels). Tous les navigateurs non modifiés sont conformes à : 1em=16px. Puis 12px=0,75em, 10px=0,625em. Afin de simplifier la conversion de la taille de la police, 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é.

12px équivaut à une longueur de 9pt ;

12px équivaut à une longueur de 0,75em 9pt équivaut à une longueur de 0,75em
Généralement, nous les utilisons pour convertir ; px plus

Conversion avancée em en px :

La hauteur de police par défaut de tout navigateur est de 16 px (16 pixels). Tous les navigateurs non modifiés sont conformes à : 1em=16px. Puis 12px=0,75em, 10px=0,625em. Afin de simplifier la conversion de la taille de la police, 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é.

Durée d'utilisation spécifique :

Nous déclarons une font-size=62,5% initiale pour toutes les balises htmlPar exemple :
*{font-size=62,5% >
La mise en page suivante peut être définie selon les techniques suivantes. L'unité em
font-size:1.2em est égale à font-size:12px
font-size:1.4em est égale à font-size:1.2em. size:14px
Par analogie, après la font-size=62,5% initiale, les unités em et px ne sont que 10 fois différentes, ce qui facilite le calcul et la définition de la valeur de longueur em.

4. L'unité em a les caractéristiques suivantes : -

TOP

1. La valeur de em n'est pas fixe

2. em will ; hériter du parent La taille de la police des éléments de niveau.

Si nous voulons les utiliser comme unité lors de l'écriture de CSS, nous devons faire attention à deux points :

　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é

　 3. Recalculez la valeur em de ces polices agrandies. Évitez les déclarations répétées de tailles de police.

C'est pour éviter le phénomène de 1,2 * 1,2= 1,44. Par exemple, si vous déclarez que la taille de la police est de 1,2em dans #content, alors la taille de police déclarée ne peut être que de 1em, et non de 1,2em, car ce em n'est pas celui-là, et il change en raison de l'héritage de la hauteur de police de # contenu Pour 1em=12px.

Mais l'exception concerne les caractères chinois 12px, c'est-à-dire que les caractères chinois 12px (1,2em) obtenus par la méthode ci-dessus ne sont pas égaux à la taille de police directement définie par 12px dans IE, mais sont légèrement plus grands. Ce problème a été résolu par Jorux. Changez simplement 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. Je ne sais pas s'il y a une autre explication.

5. Unités de page Web recommandées - TOP

Donc, afin d'éviter les erreurs de conversion d'unités , il est recommandé d'utiliser PX (pixels) comme page Web. unité de production .

Ce qui précède vous présente l'unité px em pt et la méthode de conversion. Généralement, l'unité de longueur que nous utilisons utilise désormais px comme unité de longueur. Ici, nous recommandons également d'utiliser px (pixels) comme unité de taille et de longueur de la page Web , qui est conforme à l'unité de pixels du navigateur et également pour faciliter le calcul de la longueur et de la taille.

À propos du résumé de l'unité px pt em - TOP

1), il est recommandé que le pixel px soit l'unité : nous utilisons généralement px (pixel comme unité) plus , suivi de em Unit, il est généralement recommandé d'utiliser px comme unité
2), notre résolution d'affichage est en px pixels
3), nos captures d'écran QQ sont également en px pixels ;

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!