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

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

Code CSS :

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

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

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 0,75em 9pt équivaut à une longueur de 0,75em
Généralement, nous les utilisons pour convertir ; px plus

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é.

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 : -

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!