Quelles unités de mesure existe-t-il en HTML ?

Il existe trois unités de mesure en HTML, l'une est px, le nom de l'unité est pixel, la seconde est em, le nom de l'unité est une unité de longueur relative, la troisième est pt, le nom de l'unité est point (Point), nous allons donnez-le-vous Analysez les fonctions de ces trois unités

Le nom de l'unité px est pixel, qui est une unité de longueur relative. Le pixel (px) est la recommandation nationale relative à la résolution de l'écran du moniteur ; 🎜>em Les noms d'unités sont des unités de longueur relative. Par rapport à la taille de la police du texte dans l'

objet

actuel, il est utilisé davantage à l'étranger ; lecture étendue : balise html em, balise html em accentuation le nom de l'unité pt 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.

Courte introduction aux unités HTML :

Px pixel 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 une 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 IE <.> (ou noyau).

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.

Cas de comparaison des unités HTML

1. Exemple simple :

Largeur : 300 px avec une largeur de 300 pixels

Largeur : 300pt avec une largeur de 300. points

Largeur : 300em de largeur est 300 de longueur relative

Ci-dessus, nous définissons différents exemples d'unités de la même valeur

Définissons différentes unités de longueur em px pt pour le texte pour voir le effet :

Code CSS :

Code HTML :

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

conversion em en px

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

La hauteur de police par défaut de tout navigateur est 16 pixels (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 9 pts ;

12px équivaut à une longueur de 0,75 em ;

9 pts équivaut à une longueur de 0,75 em ;

Généralement, nous utilisons em 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 taille de police initiale=62,5% pour toutes les

balises HTML

telles que :

*{font-size=62.5%}

La disposition 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 égal à font-size:14px

et ainsi de suite. Après la taille de police initiale = 62,5 %, il n'y a qu'une différence de 10 fois. entre les unités em et px pour faciliter le calcul et le réglage de la valeur de longueur em.

l'unité em a les caractéristiques suivantes :

1. La valeur de em n'est pas fixe

2. em

héritera de la police du

; taille de l'élément parent.

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.

Unité de page Web recommandée

Ainsi, pour éviter les erreurs de conversion d'unité, il est recommandé d'utiliser PX (pixel) comme unité de production de page Web.

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, ce qui correspond à l'unité de pixel du navigateur et également pour faciliter le calcul de la taille de la longueur.

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

1) Recommander le pixel px comme unité : généralement, nous utilisons davantage px (pixel comme unité), suivi de l'unité em, il est généralement recommandé à tout le monde d'utiliser px comme unité Unité

2), notre résolution d'affichage est en px pixels

3), nos captures d'écran QQ sont également en px pixels ;

Nous présenterons ici les unités HTML. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser la balise 1aa9e5d373740b65a0cc8f0a02150c53 du html

Comment rédiger la déclaration de type de document html

Comment saisir des caractères d'espace en HTML

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!