Quelle est la différence entre px et em en HTML5

Différences : 1. La longueur de l'unité est différente, px est l'unité de longueur de l'image numérique et em est un multiple de la largeur du caractère ; 2. Les objets relatifs sont différents, px est relatif à la résolution de l'écran du moniteur et em. est relatif au texte dans la taille de police actuelle de l'objet. 3. La valeur de px est fixe, c'est celle que vous spécifiez, et le calcul est plus simple ; la valeur de em n'est pas fixe et em héritera de la taille de police de l'élément parent.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

PX

px pixel (Pixel). Les pixels px sont relatifs à la résolution de l'écran du moniteur.

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 l'ajuster est qu'ils utilisent em ou rem comme unité de police ; . Firefox peut ajuster px, em et rem, mais plus de 96 % des internautes chinois utilisent le navigateur (ou le noyau) IE.

EMem est 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.

Fonctionnalités EM

1. La valeur de em n'est pas fixe ;

2. La différence entre

px et em :

1. La longueur unitaire est différente

px est l'unité de longueur de l'image numérique, et em est le multiple de la largeur du caractère.

2. Différents objets relatifs

px est relatif à la résolution de l'écran du moniteur, em est relatif à la taille de la police du texte dans l'objet actuel.

3. Différentes valeurs

La valeur de px est fixe, c'est celle que vous spécifiez et elle est plus facile à calculer. La valeur de em n'est pas fixe et em hérite de la taille de police de l'élément parent.

Remarque : La hauteur de police par défaut de tout navigateur est de 16 px. 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é.

Ainsi, lorsque nous écrivons du 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 En tant qu'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,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.

Recommandations associées : "

Tutoriel vidéo 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!