Connaissez-vous la différence entre em et px en CSS ?

Les sites Web nationaux, y compris les trois principaux portails, ainsi que Blue Ideal, ChinaUI, qui « mène » la tendance de la conception de sites Web chinois, 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 :

IE ne peut pas ajuster la taille de la police qui utilise px comme unité

La raison pour laquelle la plupart des sites Web étrangers peuvent s'ajuster est qu'ils utilisent em comme police ; unit ;

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

em a les caractéristiques suivantes :

La valeur de em n'est pas fixe ;

em héritera de la taille de police de l'élément parent ;

Ainsi, lorsque nous écrivons du CSS, nous devons faire attention à quelques points :

Déclarez Font-size=62,5% dans le sélecteur de corps

Changez votre px d'origine ; valeur Divisez par 10, puis remplacez-la par em comme unité

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



C'est à dire 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 grand. 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!