La différence entre les unités px et em en CSS

Les sites Web nationaux, y compris les trois principaux portails, ainsi que Blue Ideal, qui « mène » la tendance de la conception de sites Web chinois, ChinaUI, etc., utilisent tous px comme unité de police. Seul Baidu a donné l’exemple. De l’autre côté de l’océan, presque tous les sites grand public les utilisent comme unité de police, qui est réglable. Oui, px est plus facile à utiliser que em, et la plupart des lecteurs ne savent pas ce qu'est em ni combien de px il représente. Les étrangers attachent une grande importance à l'accessibilité des sites Web (Accessibility), non seulement en raison de son esprit humaniste profondément enraciné, mais la raison directe peut être qu'il existe une loi pour les restreindre - comme l'article 508 aux États-Unis, qui oblige les sites Web à pour atteindre un certain niveau d’accessibilité.

​Points clés : ​

1. Dans le passé, IE ne pouvait pas ajuster la taille de la police en utilisant px comme unité, mais maintenant presque tous les IE le prennent en charge

 ; 2. La raison pour laquelle la plupart des sites Web étrangers peuvent être ajustés est qu'ils les utilisent 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 pixel (Pixel). Unité de longueur relative. Les pixels px sont relatifs à la résolution de l'écran du moniteur.

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

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

​em présente les caractéristiques suivantes :

1. La valeur de em n'est pas fixe ;
2. em héritera de la taille de police de l'élément parent.

​Donc, 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 comme unité
; 3. Recalculez les valeurs 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.

Mais l'exception concerne les caractères chinois de 12 px, c'est-à-dire que les caractères chinois de 12 px (1,2 em) obtenus par la méthode ci-dessus ne sont pas égaux à la taille de police directement définie par 12 px 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.

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!